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!

Prosenchyma

Were you ever able to determine the :hover background image via JS, or did you wind up having to use some other workaround? – Twobit

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

Dorrisdorry

In this case, I am unable to use sprites, as the site I am working on is for an artists' portfolio and is very UI intensive w/r/t the images being displayed. I agree that it will slow the load time down, but the client insists that all images be pre-loaded before the user is able to interact with it. Thanks for the suggestion, but it will not work in this case :-( – Prosenchyma

Answer 2

It does sound like sprites are the right solution to this problem. But if they can't be implemented for some reason, what you want to do is access the document.styleSheets collection to search for rules with :hover in them. This page will get you started.

Popele

This is the path I attempted like to take, however, being a nerd, I would like to build something that would be re-usable in the future. The problem with parsing the CSS file is that we have multiple CSS files residing in different directories for reasons I cannot explain in 500 characters. Therefore, I would have to do some mind-numbing relative path logic to get the paths to be relative to the page. This problem was solved using the $(this).css("background-image") approach, as this was returning the image URL relative to the page. So thanks, but my ? remains - can I read the :hover props? – Prosenchyma