jQuery - how to get/read css property on :hover pseudo class

Question

I am working on an image preloader that will preload all images on a page. My approach is as follows:

onDomReady, loop through $("*") //go thru all elements when the DOM is ready

• if $(this).tagName.toLowerCase() == 'img', read src attribute, and preload that image
• else if $(this).css("background-image") != "none", read the the background-image prop and preload that image

My problem is that this approach does not pick up on the :hover class, which is normally the image that would need to be preloaded anyways.

What I would like to do is be able to, while looping through all elements, check for the existance of the :hover pseudo class, and then check for the existance of the "background-image" property on that class.

I really would like to stick with this approach, as it a) allows me to not have to explicitly specify each and every image I want to preload, and b) takes care of relative paths within the CSS, as reading the "background-image" property gives me the path relative to the page.

So, my question is:

Is is possible, using jQuery, to read the CSS properties on the :hover pseudo class for an element? If not, any suggestions?

Thanks!

Answer 1

This is going to be very intensive when loading the page to search through all DOM/CSS images... it's probably not a good idea on a public site. A good alternative is to utilize image sprites (http://www.google.com/images/nav_logo26.png) and position them with CSS