悬停特定时间后如何触发功能？

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>