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 comment:1
| status: | new → open |
|---|
Changed April 02, 2011 12:45AM UTC by comment:2
| owner: | john → pixeline |
|---|---|
| priority: | major → undecided |
| status: | open → pending |
Please confirm this issue still exists
Changed April 05, 2011 04:28AM UTC by 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 comment:4
| milestone: | 1.4 → 1.next |
|---|
Changed April 19, 2011 07:43AM UTC by comment:5
| resolution: | → invalid |
|---|---|
| status: | pending → closed |
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 comment:6
| priority: | undecided → low |
|---|---|
| resolution: | invalid |
| status: | closed → reopened |
| version: | 1.3.2 → 1.7 |
Changed November 07, 2011 12:45AM UTC by comment:8
| status: | reopened → open |
|---|
I think we could actually support :hover.
return elem === document.hoverElement;
Changed November 07, 2011 12:55AM UTC by 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 comment:10
Actually I saw it in nwmatcher, but perhaps you're right.
Changed November 07, 2011 01:01AM UTC by comment:11
Why did you reopen this? heh
Changed November 07, 2011 01:20AM UTC by comment:12
| resolution: | → wontfix |
|---|---|
| status: | open → closed |
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.
The querySelectorAll implementations are supposed to support the ":hover" selector, e.g.,
http://webkit.org/blog/156/queryselector-and-queryselectorall/
However, the overhead of figuring this out in Sizzle without qSA seems horrific.