19

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

mathheadinclouds
  • 3,507
  • 2
  • 27
  • 37

3 Answers3

23

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

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

Mooseman
  • 18,763
  • 14
  • 70
  • 93
  • 7
    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
  • 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
0

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;

}
luxigoo
  • 1
  • 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
0

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

Igor Ostapchuk
  • 1
  • 3