jQuery get css hover values

Question

On page ready I want to run a function that will get the css background-image setting and also the hover background-image setting which I wish to then utilize in another fashion.

The only method I have seen to accomplish this requires someone to actually mouse over the element before you can get the value.

Anyone have a way?

This is how to get a css non-hover value:

$(this).css('background-color');

Answer 1

To do this you will need to read values from the stylesheet directly. The basic idea is to iterate through each stylesheet in document.styleSheets, and within these, iterate through each rule in .cssRules or .rules, looking for a .selectorText that matches what you're after.

To simplify things, I wrote a (tiny) library for this purpose - JSS. If you have a selector, for example #someId:hover, then using JSS, you can get its background-color property with:

jss('#someId:hover').get()['background-color']