5秒前鼠标取消后如何隐藏元素？

#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>

Here I have a bit of code that, whenever, Div1 is hovered by the mouse, Div2 shows. When not hovering over Div1 or Div2, Div2 hides itself.

在这里，我有一些代码，只要Div1被鼠标悬停，Div2显示。当没有悬停在Div1或Div2上时，Div2隐藏自己。

How can I make it that when the mouse is hovering over Div1, but has not been moved for 5 seconds, Div2 hides itself?

当鼠标悬停在Div1上但是没有移动5秒钟时，Div2如何隐藏自己呢？

5 个解决方案

#1

The other 2 answers are incomplete. Try to hover on the link twice or thrice within 5 seconds and the logic breaks. Try this, and obviously, remove CSS.

其他2个答案都不完整。尝试将链接悬停在链接上两次或在5秒内三次并且逻辑中断。试试这个，显然，删除CSS。

var intervalIsGoingOn = false;
    
    document.getElementById('div1').onmouseover = function() {
       document.getElementById('div2').style.display = "block";
    }
    
    document.getElementById('div1').onmouseout = function() {
       if(intervalIsGoingOn) return;
       intervalIsGoingOn = true;
       setTimeout(function() {
          document.getElementById('div2').style.display = "none";
          intervalIsGoingOn = false;
       }, 1000);
    };

<div id="container">
  <div id="div1">Div1</div>
  <div id="div2" style="display:none">Div2</div>
</div>

#2

With the current HTML structure, hiding a sibling element, this is perfectly possible with CSS transitions:

使用当前的HTML结构，隐藏兄弟元素，CSS转换完全可以实现：

#div1 {
  display: block;
}

#div2 {
  /* Using opacity to hide the element, since animating from
     'display: none' or 'visibility: hidden' is not possible: */
  opacity: 0;

  /* Setting the transition-delay to five seconds (5s), for
     the non-hovered state of the element: */
  transition-delay: 5s;
}

#container:hover>#div2 {
  /* Updating the opacity to 1; to show the element with
     no transparency (adjust to taste): */
  opacity: 1;
  /* setting the property to animate ('opacity'), over
     a period 0.3 seconds with a linear transition: */
  transition: opacity 0.3s linear;
}

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

If, however, you need to hide a previous sibling element it's possible to emulate the behaviour using CSS and flex-boxes; this approach only emulates the behaviour, as the elements remain in their original positions in the source and are re-ordered using the flex-box order:

但是，如果您需要隐藏先前的兄弟元素，则可以使用CSS和弹性框来模拟行为;此方法仅模拟行为，因为元素保留在源中的原始位置，并使用弹性框顺序重新排序：

#container {
  /* displays the element as a flex container element,
     able to contain, and display, flex items
     appropriately: */
  display: flex;
  /* sets the flex-direction to follow a top-to-bottom
     layout (sort of emulating 'display: block': */
  flex-direction: column;
}

#div2 {
  opacity: 0;
  transition-delay: 5s;
  /* Positions the element ahead of elements with
     an 'order' property of 0 or greater (the
     default 'order' property is 1):*/
  order: -1;
}

#container:hover>#div2 {
  opacity: 1;
  transition: opacity 0.3s linear;
}

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

#3

You need to use javascript or jquery to do this work. When #div1 hovered, show #div2 and when it unhovered use javascript setTimeout() function to hide #div2 after 5 seconds.

你需要使用javascript或jquery来完成这项工作。当＃div1悬停时，显示#div2，当它被取消时，使用javascript setTimeout（）函数在5秒后隐藏#div2。

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

If you hover in and out quickly for multiple time, the interval doesn't work properly. You should store interval in variable and on every unhover event use clearInterval() to removing previous interval.

如果您快速地进出多次，则间隔不能正常工作。您应该在变量和每个unhover事件中存储间隔，使用clearInterval（）来删除前一个间隔。

var timer;
$("#div1").hover(function(){
  $("#div2").show();
}, function(){
  clearInterval(timer);
  timer = setTimeout(function(){
    $("#div2").hide();
  }, 5000);
});

var timer;
$("#div1").hover(function(){
  $("#div2").show();
}, function(){
  clearInterval(timer);
  timer = setTimeout(function(){
    $("#div2").hide();
  }, 5000);
});

#div2 { display: none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="div1">Div1</div>
  <div id="div2">Div2</div>
</div>

#4

You can use this

你可以用它

var delayMillis = 5000; //5 seconds

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

Code will be executed with 5 second delay.

代码将以5秒延迟执行。

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

setTimeout(fade_out, 5000);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

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

#5

-1

2 hours later, I figured it out.

2个小时后，我发现了。

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


#div1{
    display: block;
}
#div2{
    display: none;
}


$('#container').mousemove(function() {
    $('#div2').show();
        setTimeout(function(){
            if ($('#div2').is(":hover")) {
        } else {
            $('#div2').hide();
      }
        },5000);
});

#1