Preloading css hover images using jQuery

Question

Does anybody know a good way to preload css hover images using jQuery?

What I'd ideally like is to be able to add a class (say "pre-load-hover") to any element that should be pre-loaded, and then put some js in $(document).ready() to loop through any DOM elements with that class, find their css background-image and load it up.

The problem is I can't work out a way to easily get to the hover image location. The jQuery selector :hover does not seem to work.

I also don't want to load all the stylesheets and search for the selector by some sort of string search.

Answer 1

I think you should try with CSS sprites. This is a technique where you use one image which contains both the normal image and the hover image. Then you just play with the margin (using negative margin) to show the appropriate image. You can read this article about CSS sprites.