:hover Selector Doesn't Work With Jquery 1.4

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, bu

Solution 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 ) {
    returnthis.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:

#somethinga:hover {
    background: red;
}

#somethinga:hover.icon {
    animation: 2s rotate ease-out;
}

With something as broadly-supported as :hover, I can think of no good reason to avoid it.

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

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

Solution 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

Solution 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("<styletype='text/css'>#something:hover{foo: bar}</style>");