When using an AJAX request to load a portion of a webpage, the content is delivered by a framework and then inserted into the DOM tree using jQuery. Everything seems to be working well so far.
However, I encountered an issue when trying to use background images for links in the delivered content. These background images are created during the processing of the AJAX request. Typically, I would include the path to the background image in a style attribute within the link tags, which works fine until I wanted to implement pseudo-classes like :hover (you know, to display an alternative image when the mouse hovers over it).
One solution could be to create a custom CSS file that can be dynamically inserted into the HTML head. The challenge is that since this is an AJAX request, the HTML head has already been sent before the additional CSS file can be added.
Do you have any suggestions on how to apply CSS properties to links that are generated during an AJAX call?