:hover produces errors. How can I fix this?

Question

I noticed that I was getting the following error in the console on my website.

Error: Syntax error, unrecognized expression: unsupported pseudo: hover @ /wp-includes/js/jquery/jquery.js?ver=1.8.3:2

I found out the error was due to this line in one of my js files:

if(qactive == 0 && !($('#slider').is(":hover"))) {

What alternate way can I write this line for the error to disappear?

On hover event, add a class `active` to the element, then check for that class in your if statement. — Ragnarokkr, Apr 04 '13 at 00:11
jQuery intentionally doesn't implement `:hover`, because it would require adding lots of handlers to the page (every element would need event hooks because jQuery doesn't know which ones you might check in the future), generally slowing everything down. — Dave, Apr 04 '13 at 00:14
This is real question equivalent to: "What is the alternative to the `.is(':hover')` in the previous jQuery versions?" — Dorian, Jun 19 '14 at 20:58

Ragnarokkr · Accepted Answer · 2013-04-04T00:47:50.423

You need only to bind your element to a couple of events.

$("#slider").hover(
    function(){
        $(this).addClass('is-hover'); // you can use every class name you want of course
    },
    function(){
        $(this).removeClass('is-hover');
    }
);

or, in a more concise way

$("#slider").hover(
    function(){
        $(this).toggleClass('is-hover'); // you can use every class name you want of course
    }
);

In this way every time the mouseenter event is fired you will add a is-hover class to your element and, when the mouseleave event is fired, you will remove the class.

In your if statement you will have to change only:

if ( qactive == 0 && !($("#slider").hasClass('is-hover')) ) {

That's it.

Please note that you will have to adapt this example to your code, of course. Here I'm only assuming what you could need, since I can't see your code.

If you don't have already set `.hover()` for your controls, usually this bindings are inserted into the `$(document).ready()` statement. In this way you're sure that the elements are all available to be attached to the events. — Ragnarokkr, Apr 04 '13 at 00:56

score 3 · Answer 2 · edited May 23 '17 at 12:13

It appears that the ":hover" selector is deprecated in jQuery 1.8 http://bugs.jquery.com/ticket/11731 see also jQuery 1.8: unsupported pseudo: hover

You'll probably have to add a new event handler yourself to recognize this status:

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

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

mutex · Answer 3 · 2013-04-04T00:17:43.287

Have a look at the hover mouse event. You could replace the check for !($('#slider').is(":hover")) with straight boolean flag\variable which you set and unset through hover on $('#slider')

http://api.jquery.com/hover/

You'll need to give a bit more code and perhaps a jsfiddle if you want an example of this.

A really basic example might be something like:

var sliderHover= false;

$('#slider').hover(
    function () {
        sliderHover = true;
    },
    function () {
        sliderHover = false;
    }
});

// ...........MORE CODE ................

// Then later just check - watch your scoping though
if(qactive == 0 && !sliderHover)

:hover produces errors. How can I fix this?

3 Answers3