is(":hover") 仅在 setInterval 函数中工作

Question

请看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>

为什么对于 div 1，悬停检查工作正常，而在 div 2 中却不行？

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

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

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

Answer 1

不要将您的代码移动到 setInterval 中： 您的第二个示例“不起作用”的原因是它仅在页面加载后才会执行。另一方面，setInterval 每隔 ~0 执行一次，它“有效”。

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

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

jsfiddle

Answer 2

好问题！通过将代码放在 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 3

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

改成

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 4

您的小提琴的问题是您的第二次检查超出了区间函数。试试这个：

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