Question

＆＃13;

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", "");
}

＆＃13;

#one {
  width: 200px;
  height: 200px;
  background-color: yellow;
}
#two {
  width: 200px;
  height: 200px;
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="one"></div>
<div id="two"></div>

＆＃13;

为什么对于div来说，悬停检查工作得很好，而在div 2中却没有？

使用if ($('#element:hover').length != 0)（取自ivo's solution）时遇到同样的问题。

JS为此提琴：https://jsfiddle.net/q8dfLc6s/

在更一般的意义上，我正在寻找最简单，最可靠的方法来了解鼠标是否在JQuery 1.11.0中的div上。就目前而言，除了这个SetInterval奇怪之外，我甚至无法使用布尔检查。

Answer 1

你的小提琴的问题是你的第二次检查是在你的间隔功能之外。试试这个：

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

Answer 2

第二个不起作用，因为它不在间隔计时器内，并且该代码仅在页面加载时运行

更改为

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

我不知道为什么你需要这个，不要只使用悬停事件或悬停css

的 DEMO

Answer 3

好问题！通过将代码放在setInterval中，您实际上是在event loop中镜像浏览器在后台执行的操作。

通常应该避免这种行为，而是用实际事件代替。

在jQuery中，这看起来像是：

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

更多信息：https://api.jquery.com/on/

编辑：您运行的代码最好使用:hover选择器在CSS中完成：

#element {
    background-color: blue
}

#element:hover {
    background-color: red
}

Answer 4

而不是在setInterval内移动代码：你的第二个例子不起作用的原因是它只在页面加载后才会执行。另一方面，setInterval执行“0”工作＆＃39;。

但要实现您尝试做的事情，请考虑使用.hover()，因为它正在侦听将光标移入或移出选择器的实际事件，并且不会执行您的{{1阻止所有的时间：

else

jsfiddle

是（＆＃34;：hover＆＃34;）仅在setInterval函数

4 个答案: