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

Answer 1

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.

Answer 2

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