: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

: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 2

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

Answer 3

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).css("color","red");
  },
  function(){
    $(this).css("color","black");
  }
);

Answer 4

: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 5

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 6

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 7

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

And change the colours via css

Note: Calling $(selector).hover(handlerInOut) is shorthand for:

$(selector).bind("mouseenter mouseleave",handlerInOut);