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

Whitton

On hover event, add a class active to the element, then check for that class in your if statement. – Wimberly

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. – Monophagous

this question helped me, sorry it's been closed by ejits. – Reube

This is real question equivalent to: "What is the alternative to the .is(':hover') in the previous jQuery versions?" – Chiu

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.

Wimberly

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. – Wimberly

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

Citrus

Answer 3

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)

Just