javascript - 如何在 Bootstrap Dropdown Hover 上添加延迟

Question

我正在尝试为 Bootstrap 下拉列表添加延迟。我已经添加了 CSS 以使下拉菜单在悬停时显示。

你可以在这里测试http://www.bootply.com/YcVBzvXqrR

这是我的 HTML:

 <div class="container">
   <div class="row">
      <div class="col-xs-12">
         <div class="category-box">
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-bullhorn fa-3x"></i>
                     <h5>CATEGORY 1</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 1</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-car fa-3x"></i>
                     <h5>CATEGORY 2</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 2</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-file-text fa-3x"></i>
                     <h5>CATEGORY 3</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 3</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-home fa-3x" style="margin-bottom: -20px; margin-top: -11px; font-size: 4em;"></i>
                     <h5>CATEGORY 4</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 4</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-cogs fa-3x"></i>
                     <h5>CATEGORY 5</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 5</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-users fa-3x"></i>
                     <h5>CATEGORY 6</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 6</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-heart fa-3x"></i>
                     <h5>CATEGORY 7</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 7</a>
               </div>
            </div>
            <div class="dropdown">
               <a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
                  <div class="services-shortcut">
                     <i class="fa fa-briefcase fa-3x"></i>
                     <h5>CATEGORY 8</h5>
                  </div>
               </a>
               <div class="dropdown-menu category-overlay">
                  <a href="#">Action 8</a>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

这是我的 CSS:

.dropdown:hover .dropdown-menu {
    display: block;
 }

.category-overlay{
    width:1190px;
    height:90px;
    background:#ddd;
    margin-top:30px;
}

我需要知道如何让下拉菜单在稍有延迟后出现。

Answer 1

我建议的两个更改

1. 添加以下 Jquery 代码以添加延迟:

   jQuery('div.dropdown').hover(function() {
   
             jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
           }, function() {
           jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
       });
   

2. 移除CSS

   /.dropdown:hover .dropdown-menu { 显示: block ； /

这是我修改过的 fiddle

http://www.bootply.com/YcVBzvXqrR#