如何在鼠标悬停5秒前隐藏元素？

Question

#div1 {
  display: block;
}

#div2 {
  display: none;
}

#container:hover > #div2 {
  display: block;
}

<div id="container">
  <div id="div1">Div1</div>
  <div id="div2">Div2</div>
</div>

这里我有一些代码，每当Div1鼠标悬停时，Div2就会显示这些代码。当未将鼠标悬停在Div1或上时Div2，Div2会隐藏自身。

如何让鼠标悬停在 上Div1但 5 秒内没有移动时Div2隐藏自身？

Answer 1

你可以用这个

var delayMillis = 5000; //5 seconds

setTimeout(function() {
  //your code.
}, delayMillis);

代码将延迟 5 秒执行。

var delayMillis = 5000; //5 seconds

setTimeout(function() {
  //your code.
}, delayMillis);

$("#div1").hover(function(){
    $('#div2').show();
},function(){
    $('#div2').hide();
});

setTimeout(fade_out, 5000);

function fade_out() {
  $("#div2").hide();
}