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?

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?

• javascript
• jquery
• jquery-hover

• 4 On hover event, add a class active to the element, then check for that class in your if statement. – Ragnarokkr Commented Apr 4, 2013 at 0:11
• 1 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 Commented Apr 4, 2013 at 0:14
• 2 this question helped me, sorry it's been closed by ejits. – andygoestohollywood Commented Nov 7, 2013 at 11:14
• This is real question equivalent to: "What is the alternative to the .is(':hover') in the previous jQuery versions?" – Dorian Commented Jun 19, 2014 at 20:58

3 Answers 3

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.

It appears that the ":hover" selector is deprecated in jQuery 1.8 http://bugs.jquery./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');
}

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./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)