Opened 14 years ago
Closed 11 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: |
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.
Change History (12)
comment:1 Changed 12 years ago by
Status: | new → open |
---|
comment:2 Changed 12 years ago by
Owner: | changed from john to pixeline |
---|---|
Priority: | major → undecided |
Status: | open → pending |
Please confirm this issue still exists
comment:3 Changed 12 years ago by
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 12 years ago by
Milestone: | 1.4 → 1.next |
---|
comment:5 Changed 12 years ago by
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!
comment:6 Changed 11 years ago by
Priority: | undecided → low |
---|---|
Resolution: | invalid |
Status: | closed → reopened |
Version: | 1.3.2 → 1.7 |
comment:8 Changed 11 years ago by
Status: | reopened → open |
---|
I think we could actually support :hover.
return elem === document.hoverElement;
comment:9 Changed 11 years ago by
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
comment:12 Changed 11 years ago by
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.