Question

所以我试图在鼠标悬停在div上时运行一个函数，当它离开div时，它会运行另一个函数。

我已尝试使用.hover();功能，但该功能无效。

<div id="test">
</div>

$("#test").hover(function() {
  window.alert("it worked!")
})

我对jQuery很新，我上个月开始。谢谢！

Answer 1

hover()

将两个处理程序绑定到匹配的元素，当鼠标指针进入并离开元素时执行。

恰好是mouseenter的第一个，mouseleave的第二个。

工作代码示例：

$("#test").hover(function() {
  console.log("Entered!")
}, function() {
  console.log("left!")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">Test
</div>

Answer 2

当鼠标进入鼠标时，以及鼠标离开时运行功能非常简单。您只需使用.mouseenter()和.mouseleave()函数。

所以在你的背景下：

<div id="test">
</div>

$("#test").mouseenter(function() {
  window.alert("it worked");
})

$("#test").mouseleave(function() {
  window.alert("it worked");
})

希望这有帮助！

Answer 3

您的代码似乎没问题，只需注意使用＆＃34;＆＃34;之间的id属性。并注意警报会阻止浏览器工作，直到您与其进行交互。

尝试此操作以查看鼠标的进出情况：

$("#test").hover(function() {
  $("body").css('background-color','green');
}).mouseout(
function() {
  $("body").css('background-color','red');
});

如何在鼠标进入div时运行一个函数，反之亦然？

3 个答案: