Question

＆＃13;

                        <!-- Begin MailChimp Signup Form -->
                <div id="optin">
                <form action="//scottdaviesdesign.us15.list-manage.com/subscribe/post?u=6a0182b1b060f7307996ee031&amp;id=26cb77a478" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value=";" onblur="if(this.value==")this.value=this.defaultValue;" class="required email" placeholder="Your Email Address">
                <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_6a0182b1b060f7307996ee031_26cb77a478" tabindex="-1" value=""></div>
                    <div id="mce-responses" class="clear">
                        <div class="response" id="mce-error-response" style="display:none"></div>
                        <div class="response" id="mce-success-response" style="display:none"></div>
                    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe">
                </form>
                </div>
                <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
                <!--End mc_embed_signup-->

＆＃13;

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

＆＃13;

在这里，我有一些代码，只要<div id="container"> <div id="div1">Div1</div> <div id="div2">Div2</div> </div>被鼠标悬停，Div1显示。如果不将鼠标悬停在Div2或Div1上，则Div2会自行隐藏。

如何在鼠标悬停在Div2上但未移动5秒钟时，Div1隐藏自己？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用此

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 4

您需要使用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 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秒前鼠标取消后如何隐藏元素？

5 个答案: