Skip to main content

Bug Tracker

Side navigation

#4434 closed feature (wontfix)

Opened March 27, 2009 09:27AM UTC

Closed November 07, 2011 01:20AM UTC

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:
Description

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.

Attachments (0)
Change History (12)

Changed November 17, 2010 02:15AM UTC by dmethvin comment:1

status: newopen

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.

Changed April 02, 2011 12:45AM UTC by rwaldron comment:2

owner: johnpixeline
priority: majorundecided
status: openpending

Please confirm this issue still exists

Changed April 05, 2011 04:28AM UTC by addyosmani comment:3

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.

Changed April 05, 2011 04:28AM UTC by addyosmani comment:4

milestone: 1.41.next

Changed April 19, 2011 07:43AM UTC by trac-o-bot comment:5

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!

Changed November 06, 2011 01:49PM UTC by dmethvin comment:6

priority: undecidedlow
resolution: invalid
status: closedreopened
version: 1.3.21.7

Changed November 06, 2011 01:50PM UTC by dmethvin comment:7

#10694 is a duplicate of this ticket.

Changed November 07, 2011 12:45AM UTC by timmywil comment:8

status: reopenedopen

I think we could actually support :hover.

return elem === document.hoverElement;

Changed November 07, 2011 12:55AM UTC by dmethvin comment:9

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

Changed November 07, 2011 12:58AM UTC by timmywil comment:10

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

Changed November 07, 2011 01:01AM UTC by timmywil comment:11

Why did you reopen this? heh

Changed November 07, 2011 01:20AM UTC by dmethvin comment:12

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.