.is(":hover") is broken as of jQuery 1.9 How to fix

Question

When doing $(...your selector here...).is(":hover"), jQuery prior to 1.9.1 gave correct answer, while jQuery 1.9.1 tells you this:

Error: Syntax error, unrecognized expression: unsupported pseudo: hover

This is not about performing an action on hover - for that, just use .hover() This is about, at an arbitrary point in time, finding out whether or not some element is being hovered

Thank you Mooseman for the answer, which I shall demonstrate with a fiddle

Are you trying to answer your own question ? If so do it properly : write an answer. — Denys Séguret, May 11 '13 at 13:14
You are making things complicated. Simply [`.hover()`](http://api.jquery.com/hover/) would do: http://jsfiddle.net/BxL4w/5/ — Antony, May 11 '13 at 13:21
@Anthony: wrong. I want a boolean, is it hovered or not. I do not want to perform an action on hover. — mathheadinclouds, May 11 '13 at 13:54
You should not put the answer into the question. If you wish, you are allowed to answer your own question instead. — kapa, May 11 '13 at 13:55

Mooseman · Accepted Answer · 2015-03-30T17:23:18.407

22

Assuming your selector is #myid, use $('#myid:hover') instead of using .is().

If you are using $(this) or a variable, use myVar.filter(':hover').

edited Mar 30 '15 at 17:23

answered May 11 '13 at 13:14

Mooseman

18,553
14
69
93

6

how about when using `$(this)` or a variable object? – t q Feb 01 '14 at 01:36
then, use var temp = $(yourElement).parent().find(":hover"); return temp.length == 1 && temp[0] == yourElement; – mathheadinclouds Mar 14 '15 at 03:58
@tq Added to my answer. – Mooseman Mar 30 '15 at 17:23
1

Doesn't work in jQuery 3.1.1... I try `$('#myid:hover').length > 0` in an event handler. – Legends Mar 01 '17 at 16:15
Not always possible when you want to check elements with global classes and no ids. $(this) not possible to ":hover" in selector! – Kareem Mar 12 '17 at 06:00
2

`.filter(:hover)` seems to always return an object, and `filter(:hover).length` works. Please consider updating. – konsolebox Jun 27 '18 at 12:20
@konsolebox The original post talks about selecting and filtering to return a jQuery object, then considering the `length` property per "has length 1". – Mooseman Jun 28 '18 at 00:50

score 0 · Answer 2 · answered Jun 01 '15 at 14:40

However the workaround above is unsuitable when you are comparing elements using jQuery.fn.is() with a composed selector which is not known beforehand, and that could match several elements in the parent container.

eg, the same exception is thrown when selectorText in style_get() below is equal to: ".mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar"

..because hover is not defined in Sizzle.selectors.pseudos or Sizzle.selectors.setFilters (jquery-2.1.4, line 1764)..

function style_get(elem) {

  var sheets=document.styleSheets;
  var css_properties={};
  elem=$(elem);

  for (var s in sheets) {
    var rules=sheets[s].rules || sheets[s].cssRules;

    for (var r in rules) {
      if (elem.is(rules[r].selectorText)) {

        css_properties=$.extend(
          css_properties,
          css.parse(rules[r].style),
          css.parse(elem.attr('style'))
        );

      }
    }

  }

  return css_properties;

}

Which "workaround" are your referring to that is "unsuitable"? Are you commenting on another post? If so you should post a comment on that post instead. Your answer seems incomplete as is. — Kmeixner, Jun 01 '15 at 15:04
@Kmeixner, The OP wrote "Here is a workaround..." it could be the answer to what you are asking. I easily found it using ctrl+f and typing "workaround" — Zectbumo, Nov 30 '17 at 01:36

Igor Ostapchuk · Answer 3 · 2019-08-06T22:41:28.523

You could try to use .filter()

I think, my solution will help you:

//
// jQuery 3 pseudo ':hover' doesn't support
//

// Working on jQuery 1.7.1
$("*").on('click', $.proxy(function() {
    if ( this.$('.tooltip:hover').length > 0 ) { // jQuery 3.2.1 -> Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover
      console.log('Hovered!');
    } else { 
      console.log('Where is my element!?'); 
    }
}, this));


// Updated solution for jQuery 1.7.1 - 3.2.1
$("*").on('click', $.proxy(function() {
    var isHovered = $('.tooltip').filter(function() {
        return $(this).is(":hover");
    });

    if ( isHovered.length > 0 ) {
      console.log('Hovered!');
    } else { 
      console.log('Where is my element!?'); 
    }
}, this));

also, you can see my GitHub gist:https://gist.github.com/antydemant/74b00e27790e65f4555a29b73eea7bb2

.is(":hover") is broken as of jQuery 1.9 How to fix

3 Answers3

Linked