如何在引导下拉列表悬停时添加延迟

How to add a Delay on Bootstrap Dropdown Hover

本文关键字：悬停添加延迟下拉列表更新时间：2023-09-26

我正在尝试为引导下拉列表添加延迟。我已经添加了 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;
}

我需要知道如何在稍有延迟后显示下拉列表。

我建议进行两项更改

添加以下 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);
    });

删除 CSS

/.dropdown：hover .dropdown-menu { 显示：块; }/

这是我修改的小提琴

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