jQuery 1.8: unsupported pseudo: hover

Question

The following code raises the error unsupported pseudo: hover on jQuery 1.8, while it works perfect on jQuery 1.7.2:

if(!$(this).parent().find('ul').first().is(':hover')) {
   $(this).parent().parent().removeClass('open');
}

Does anyone know what's going on?

Deettadeeyn

probably a bug with the rewritten Sizzle? – Kep

See this question. – Costly

There is no such a selector in docs. – Costly

:hover worked for me in this fiddle testing with jQuery 1.8 and Firefox, but didn't work for me in IE with jQuery 1.7.2 or 1.8 (but the actual error message in IE was different between 1.7.2 and 1.8). – Lederer

Answer 1

Unfortunately, while we all wish that our code were future proof, your $('foo').on( 'hover, ... function(){ //do stuff } code is deprecated in jQuery 1.8. I wish I had better news for you, but your code is broken because of a core change to jQuery 1.8. You now have to use the syntax

$('.selector').on( 'mouseenter mouseleave', function() {
      $(this).toggleClass('hover');
   }
);

if(!$(this).parent().find('ul').first().hasClass('hover')) {
   $(this).parent().parent().removeClass('open');
}

Wish I had better news for you, but deprecation happens :/ ... jQuery 1.8 doesn't like your shortcut and they've deprecated the hover event handler from .on() and also the pseudo-selector :hover, so it can't be used that way any more.

Wendel

Or $('.selector').hover( function() { $(this).toggleClass('hover'); } ); ... – Pirn

Answer 2

Old question, but for anyone googling:

A workaround for this is to go the other way round:

$(":focus, :active").filter($(".your-element"));

…because .filter() also accepts jQuery objects, this will match any elements with the pseudos :focus and :active that also have the class .your-element.

In other words, if .your-element isn't hovered or active, this selection matches no elements.

Waligore

Answer 3

weird - for me, .is(":hover") is still working in 1.8, but broken in 1.9.1.

Anyway, here is a fix

function mouseIsOverWorkaround(what){
    var temp = $(what).parent().find(":hover");
    return temp.length == 1 && temp[0] == what;
}

then call above function on the "naked" (non jQuery-wrapped) element. In your case,

if(!mouseIsOverWorkaround($(this).parent().find('ul').first()[0]) {
   $(this).parent().parent().removeClass('open');
}

(don't forget the [0])

the above-mentioned (comment to orig question) fiddle http://jsfiddle.net/nnnnnn/Tm77a/ does not work in jQuery 1.9.1

fiddle with this one http://jsfiddle.net/mathheadinclouds/BxL4w/

Botha