Googled about it - found nothing. I'm talking about CSS :hover, not jQuery .hover(). So, the code:
$('#something a:hover').css({'something': 'thomesing'});
works fine with 1.3, but not with 1.4. How to fix it?
Googled about it - found nothing. I'm talking about CSS :hover, not jQuery .hover(). So, the code:
$('#something a:hover').css({'something': 'thomesing'});
works fine with 1.3, but not with 1.4. How to fix it?
Follow the rules
This is a superb example of why we must always code according to the documentation, and not according to the possibilities. Hacks, or mere oversights like this, will eventually be weeded out.
The proper jQuery (plain css is better) way to do this follows:
$("#something a").hover(
function() {
// $(this).addClass("hovered");
$(this).css("color", "red");
},
function() {
// $(this).removeClass("hovered");
$(this).css("color", "black");
}
);
The $.fn.hover
method takes up to two arguments and serves as syntactic sugar for more explicit pointer (mouse) events. In fact, the hover method in jQuery 2.1.0 was nothing but this:
function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}
Understand your code, and be concise
As you can see, the fnOver
function is called when you enter the element, and again when you exit (if no other method is provided). With this understanding, we can setup simpler instructions:
$("#something a").hover(function () {
$(this).toggleClass("hovered");
});
Native almost always wins
Ultimately, vanilla CSS is the way to go. The :hover
pseudo-class has been around for a long time, and works with targeting not only the element to which it belongs, but nested elements as well:
#something a:hover {
background: red;
}
#something a:hover .icon {
animation: 2s rotate ease-out;
}
With something as broadly-supported as :hover
, I can think of no good reason to avoid it.
:hover is not a documented pseudoclass selector.
Try this:
$('#something a').hover(function(){
$(this).css({'something': 'thomesing'});
},
function(){
$(this).css({'something': 'previous'});
});
Although, you'd be better to use CSS classes:
$('#something a').hover(function(){
$(this).toggleClass("over").toggleClass("out");
},
function(){
$(this).toggleClass("over").toggleClass("out");
});
http://docs.jquery.com/Events/hover
EDIT:
In respose to BlueRaja's comment below, the following would be more suitable:
$('#something a').hover(function(){
$(this).addClass("over").removeClass("out");
},
function(){
$(this).removeClass("over").addClass("out");
});
addClass
and removeClass
rather than toggleClass
- many browsers will miss a mouseover/mouseout event if you run over a number of elements very quickly
Commented
Jan 18, 2010 at 15:48
hover
changed in 1.4 and funny no one here seems to have bothered checking the jQuery docs...
$("#something a").hover(
function () {
$(this).toggleClass("active")
}
);
Change the colors via css.
Note:
Calling $(selector).hover(handlerInOut)
is shorthand for:
$(selector).bind("mouseenter mouseleave",handlerInOut);
:hover is not supported in jQuery (see docs).
It doesn't really make sense either: jQuery selectors are used to select elements. What would ":hover" select?
I'm surprised it even works in 1.3
:hover
selector. Most commonly I find myself wanting to use .is(':hover')
in the same way you would use .is(':checked')
. And although the docs don't include :hover
, jQuery is commonly marketed as being easy to learn because it employs CSS selectors. :hover
is a CSS selector. At the least I can certainly understand the confusion.
Commented
Nov 25, 2013 at 5:25
I don't think it does work in 1.3. As Philippe mentioned, it doesn't make sense.
:hover is an event, not an attribute. So I don't see how that selector could work.
You could either use the hover function as antpaw mentioned - http://docs.jquery.com/Events/hover#overout
or you could set a css style rule. e.g.
$('head').append("<style type='text/css'>#something:hover{foo: bar}</style>");
To me, that selector doesn't make much sense, because it depends on an event by the user. Selectors are more about static content, where as the function hover() can track an event. The user would have to have his mouse on top of the content when you made the call.
There might be some cases that it would be useful, but in the case you mentioned, Jonathon Sampson has the right answer. Use $("#something a").hover(function() {$(this).css("something","thomesing");});
instead.
How jQuery works is that it parses selectors (whether css or regular ones) and then returns the jQuery object. As of today , jQuery doesn't support ':hover' selector. It might work in Chrome or FF or Safari, but will definitely fail in IE6, 7 and 8.
Great workaround would be to either use jQuery's hover() method.
In more complex cases you want to register mouseenter and mouseleave event handlers on container that you want to select with ':hover', and add/remove '.hover' class. Once the regular 'hover' class is there, you can easily access that container element from anywhere in the code using '#container.hover' selector.
Let me know if you need help coding this...