access :hover css properties of an element via jquery

[pixeline]

imagine i style the :hover pseudo-class of an element via css:

.myitem{ background-color:green; } .myitem:hover{ background-color:red }

I thought it would be possible to retrieve the background-color property of the element's :hover class via jquery so i tried the obvious : ​http://jsbin.com/idudi/edit

$(function(){ var temp = $('#myitem:hover').css('background-color'); alert("color is "+temp);

});

but it didn't work. Yet this works

function getStyle (selector){ var re = new RegExp('(^{|,)
s*'+selector.toLowerCase()+'
s*(,|$)'); var style = ""; $.each ($.makeArray(document.styleSheets), function(){}

$.each (this.cssRules

this.rules, function(){

if (re.test(this.selectorText)) style += this.style.cssText + ';'; });

}); return style;

}

var temp = getStyle('#myitem:hover'); alert("css= "+temp);

live here: ​http://jsbin.com/itipo

(solution inspired by ​http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript )

so end of the story: i would like to be able to retrieve the :hover properties of an element as set in the stylesheets like this:

var myColor = $('a:hover').css('background-color');

i have no idea about the cost/benefit ratio, i just think that it "feels" right to store styling in the stylesheet rather than in metadata quirks.

[dmethvin]

The querySelectorAll implementations are supposed to support the ":hover" selector, e.g.,

​http://webkit.org/blog/156/queryselector-and-queryselectorall/

If the user agent also supports some level of CSS, the implementation should support the same set of selectors in both these APIs and CSS. -- ​http://www.w3.org/TR/selectors-api/#processing-selectors

However, the overhead of figuring this out in Sizzle without qSA seems horrific.

[Rick Waldron]

Please confirm this issue still exists

[addyosmani]

As dmethvin points out, trying to achieve without without qSA support available would probably be a nightmare.Confirming that this is still an issue: ​http://jsfiddle.net/addyosmani/7ZhKt/ regardless in that it isn't yet supported.

I'm also trying to figure out a valid use-case where a large number of users would actually benefit from being able to figure out CSS properties for the hover state - if it's a page you're working with, won't you already know the CSS properties you've set for that state?. I kinda want to close this ticket, but leaving open in case you're able to justify why you think it should be in core.

[trac-o-bot]

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

[dmethvin]

#10694 is a duplicate of this ticket.

[timmywil]

I think we could actually support :hover.

return elem === document.hoverElement;

[dmethvin]

From the moreSelectors plugin? We'd need to add a custom event to the body to maintain that variable, I'm not sure the selector is important enough to justify incorporating that.

​http://plugins.jquery.com/files/JQuery.moreSelectors.js_0.txt

[timmywil]

Actually I saw it in nwmatcher, but perhaps you're right.

[timmywil]

Why did you reopen this? heh

[dmethvin]

Timmywil and I talked about it and there's no decent way to support the :hover selector on browsers that don't have it natively (no or incomplete matchesSelector support). The jQuery API documentation does not list it so it is not a selector that we promise will work cross-browser.

The way I've done this in the past is to have a mouseenter/mouseleave that added/removed a class indicating whether the element is hovered. I still think that is the best approach and perfectly cross-browser.

You could also do what the moreselectors plugin does and attach a mouseover/out handler to the document, recording the current element, but I suspect you only need to know if a handful of elements are hovered and this would be very expensive.