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 秒执行。

$("#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>

Answer 2

您需要使用 javascript 或 jquery 来完成这项工作。当 #div1 悬停时，显示 #div2，当悬停时使用 javascript setTimeout() 函数在 5 秒后隐藏 #div2。

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

如果您多次快速进出，间隔将无法正常工作。您应该将间隔存储在变量中，并且在每个悬停事件中使用 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>

Answer 3

其他2个答案不完整。尝试在 5 秒内将鼠标悬停在 link 上两次或三次，逻辑就会中断。试试这个，显然，删除 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>

Answer 4

使用当前的 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>

但是，如果您需要隐藏前一个同级元素，则可以使用 CSS 和弹性框模拟行为；这种方法仅模拟行为，因为元素保留在源中的原始位置并使用弹性框重新排序 order:

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

Answer 5

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);
});

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

How to hide element after mouse unhover 5 seconds ago?

html

javascript

css

jquery

mousehover