如何在导航菜单上显示鼠标悬停10秒？

问题描述：

<style> 
    .subnav-show { 
    display: block; 
} 
</style> 

<script> 
$(document).ready(function() {  
    $('.nav li').hover(
     function() { 
      $('ul', this).addClass('subnav-show').delay(2000).queue(function(){ 
      $(this).removeClass('subnav-show').dequeue(); 
     });    
    }); 
}); 
</script> 

<div class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="n-bar"></span> 
       <span class="n-bar"></span> 
       <span class="n-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#"><img src="logo.png" alt=""/></a> 
     </div> 
     <div class="navbar-collapse collapse "> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown mega-dropdown"> 
        <a href="#" id="home" class="dropdown-toggle" data-toggle="dropdown" >home</a>    
        <ul class="dropdown-menu mega-dropdown-menu" id="div2"> 
         <li class="col-sm-3"> 
          <p>menu1</p> 
         </li> 
         <li class="col-sm-3"> 
          <p>menu2</p> 
         </li> 
         <li class="col-sm-3"> 
          <p>menu3</p> 
         </li> 
         <li class="col-sm-3"> 
          <p>menu4</p> 
         </li> 
        </ul>    
       </li> 
      </ul> 
     </div> 
    </div> 
</div>

在这段代码中我已经创造了大量的菜单导航栏时，我鼠标移到菜单上则表现出较大的下拉栏，当我从菜单中删除鼠标后，突然大下拉菜单中的隐藏。现在，我的问题是如何将鼠标悬停在菜单上10秒钟的大菜单栏和如果我从菜单中删除鼠标然后它显示大菜单10秒后隐藏？请帮帮我。

谢谢

你尝试过什么？ –

为什么PHP标签？ – JustBaron

应用于导航栏的'：hover'规则是否应用于下拉菜单以显示下拉菜单？如果没有，只要你离开它，这个下拉菜单就会自然隐藏起来。但是，如果'：hover'规则也应用于下拉菜单，则当您将鼠标悬停在导航栏上并放到下拉菜单中时，它将保持可见状态。建议：包括你的CSS – UncaughtTypeError

答

试试这个：

https://www.bootply.com/64081

jQuery('ul.nav li.dropdown').hover(function() { 
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(); 
}, function() { 
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(1000).fadeOut(); 
});

但这没有帮助，他要求一种方法来保持悬停活跃，当他把光标放在某个东西上，反之亦然。这与他预期的答案完全不同。 –

你是对的！编辑我的答案，这个例子将解决问题 –

如果你要使用jquery，按照它的假设，使用'$（“。ul.nav li.dropdown”）'等等东西。这样你就不会混合使用2个工具，他可能会对学习更多jquery –

如何在导航菜单上显示鼠标悬停10秒？

相关推荐