javascript - 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 div one, hover check works fine, whereas doesn't in div two?

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

js fiddle that: https://jsfiddle.net/q8dflc6s/

in more general sense, looking simplest, reliable way know if mouse on div in jquery 1.11.0. stands, can't boolean check work @ aside setinterval oddity.

the problem fiddle second check outside of 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);