Bug Tracker

Opened 12 years ago

Closed 9 years ago

#4434 closed feature (wontfix)

access :hover css properties of an element via jquery

Reported by: pixeline Owned by: pixeline
Priority: low Milestone: 1.next
Component: selector Version: 1.7
Keywords: Cc:
Blocked by: Blocking:


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*(,|$)'); 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.

Change History (12)

comment:1 Changed 10 years ago by dmethvin

Status: newopen

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


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.

comment:2 Changed 10 years ago by Rick Waldron

Owner: changed from john to pixeline
Priority: majorundecided
Status: openpending

Please confirm this issue still exists

comment:3 Changed 10 years ago by 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.

comment:4 Changed 10 years ago by addyosmani

Milestone: 1.41.next

comment:5 Changed 10 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

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!

comment:6 Changed 9 years ago by dmethvin

Priority: undecidedlow
Resolution: invalid
Status: closedreopened

comment:7 Changed 9 years ago by dmethvin

#10694 is a duplicate of this ticket.

comment:8 Changed 9 years ago by timmywil

Status: reopenedopen

I think we could actually support :hover.

return elem === document.hoverElement;

comment:9 Changed 9 years ago by 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.


comment:10 Changed 9 years ago by timmywil

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

comment:11 Changed 9 years ago by timmywil

Why did you reopen this? heh

comment:12 Changed 9 years ago by dmethvin

Resolution: wontfix
Status: openclosed

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.

Note: See TracTickets for help on using tickets.