jquery - 如何在悬停特定时间后触发函数？

Question

我试图让 jquery 在悬停 5 秒后更改项目的背景颜色。因此，如果光标悬停 3 秒，则不算 ..

  $(".test").hover(function(){
    $(".item").css("background","red")
    });

Answer 1

在鼠标悬停时创建超时，如果有鼠标移出事件，则取消超时。

let timeout;

$(".test").mouseover(function() {
  timeout = window.setTimeout(() => {
    $(".item").css("background", "red")
  }, 5000);
});

$(".test").mouseout(function() {
  window.clearTimeout(timeout);
});

div {
  margin: 5px;
}

.test {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.item {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">hover me</div>
<div class="item">will change color after 5 sec</div>