jQuery - .is(':hover') always returns false

Question

I have jQuery carousel that I'm trying to add an interval scroll to without changing the core of the code. I'm doing this by simulating a click on an interval, which runs just fine.

But I do not want the click to happen if the user is hovered over the carousel container.

    var tid = setInterval(carouselClick, 5000);
    var isHovered = jQuery('.jcarousel-clip').is(':hover');
    function carouselClick() {

        if (!isHovered){
            jQuery('#test').html('<h1>'+isHovered+'</h1>');
            jQuery('.jcarousel-next').trigger('click');
        }
    }

I put in the #test bit to check the hover state when the function runs and it always returns false.

I will add html structure if necessary, but I have already double checked for typos. — Plummer, Feb 20 '14 at 15:51

score 1 · Accepted Answer · answered Feb 20 '14 at 15:51

You need to put the isHovered inside the click function

var tid = setInterval(carouselClick, 5000);

function carouselClick() {
    var isHovered = jQuery('.jcarousel-clip').is(':hover');
    if (!isHovered){
        jQuery('#test').html('<h1>'+isHovered+'</h1>');
        jQuery('.jcarousel-next').trigger('click');
    }
}

If you leave it outside, then the value of isHovered will always be the same, which is the value when it first runs

jQuery - .is(':hover') always returns false

1 Answers1