CODEWITHSUNDEEP
javascriptjquery
ericgrosse
ericgrosse

Reputation: 1510

is(":hover") only working within a setInterval function

Please see https://jsfiddle.net/cot33dxa/

setInterval(function() {
  if ($("#one").is(":hover")) {
    $("#one").css("background-color", "red");
  } else {
    $("#one").css("background-color", "");
  }
}, 0);

if ($("#two").is(":hover")) {
  $("#two").css("background-color", "blue");
} else {
  $("#two").css("background-color", "");
}
#one {
  width: 200px;
  height: 200px;
  background-color: yellow;
}
#two {
  width: 200px;
  height: 200px;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="one"></div>
<div id="two"></div>

Why is it that for div one, the hover check works just fine, whereas it doesn't in div two?

I have the same issue when using if ($('#element:hover').length != 0) (taken from ivo's solution).

JS fiddle for that: https://jsfiddle.net/q8dfLc6s/

In a more general sense, I am looking for the simplest, most reliable way to know if the mouse is over a div in JQuery 1.11.0. As it stands, I can't even get the boolean check to work at all aside from this SetInterval oddity.

Upvotes: 0

Views: 514

Answers (4)

The F
The F

Reputation: 3724

Instead of moving your code inside setInterval: the reason why your second example 'doesnt work', is the fact that it will execute only once the page has loaded. setInterval on the other hand, executes every ~0s which 'works'.

However to achieve what you're trying to do, consider to use .hover() as it is listening for the actual event of moving the cursor in or out of the selector and will not execute your else block all of the time:

$(function() {
    $("#two").hover(function() {
        $("#two").css("background-color","blue");
    }, function() {
        $("#two").css("background-color","");
    });
});

jsfiddle

Upvotes: 0

lucky7id
lucky7id

Reputation: 385

Good question! By putting your code in a setInterval you are essentially mirroring what the browser is doing in the background in the event loop.

This behavior should generally be avoided and instead replaced by an actual event.

in jQuery this would look like: 

$('#element').on( 'hover', function (this, event) {
    $element = this;
    /*handle event*/
});

More here: https://api.jquery.com/on/

Edit: The code you are running would be best done in CSS using the :hover selector as such:

#element {
    background-color: blue
}

#element:hover {
    background-color: red
}

Upvotes: 1

charlietfl
charlietfl

Reputation: 171690

The scond one doesn't work because it's not inside the interval timer and that code only runs on page load therefore

Change to

setInterval(function () {
    if ($("#one").is(":hover")) {
        $("#one").css("background-color", "red");
    } else {
        $("#one").css("background-color", "");
    }


    if ($("#two").is(":hover")) {
        $("#two").css("background-color", "blue");
    } else {
        $("#two").css("background-color", "");
    }

}, 0);

I have no idea why you need this and don't just use hover events or hover css

DEMO

Upvotes: 1

Tatermelon
Tatermelon

Reputation: 479

The problem with your fiddle is that your second check is outside of your interval function. Try this:

setInterval(function(){
    if($("#one").is(":hover")) {
        $("#one").css("background-color","red");
    }
    else {
        $("#one").css("background-color","");
    }

    if($("#two").is(":hover")) {
        $("#two").css("background-color","blue");
    }
    else {
        $("#two").css("background-color","");
    }

},0);

Upvotes: 2

Related Questions