:hover selector doesn't work with jQuery 1.4

Question

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?

Answer 1

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.

Answer 2

: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");
                      });

Answer 3

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);

Answer 4

: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

Answer 5

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>");

Answer 6

you can use .hover() function or even better plain css

Answer 7

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.

Answer 8

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...