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');

have you tried $("#"+this.id+":HOVER").css("background-color"); ? — AbiusX
– AbiusX, Commented Mar 15, 2011 at 23:59

David Tang · Accepted Answer · 2011-03-16 00:30:01Z

4

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']

edited Mar 16, 2011 at 0:30

answered Mar 16, 2011 at 0:06

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Wolf Over a year ago

jss fails the actually-does-something test, alas: jss("#espacio_publico").get() -> TypeError: Cannot read property 'length' of null

Collectives™ on Stack Overflow

jQuery get css hover values

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related