如何在Bootstrap Dropdown Hover上添加延迟

我正在尝试为bootstrap下拉列表添加延迟。 我已经添加了css来在hover时进行下拉菜单显示。

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

这是我的HTML：

 
 
 
 
  
  
CATEGORY 1
 
  
 Action 1 
 
 
  
  
CATEGORY 2
 
  
 Action 2 
 
 
  
  
CATEGORY 3
 
  
 Action 3 
 
 
  
  
CATEGORY 4
 
  
 Action 4 
 
 
  
  
CATEGORY 5
 
  
 Action 5 
 
 
  
  
CATEGORY 6
 
  
 Action 6 
 
 
  
  
CATEGORY 7
 
  
 Action 7 
 
 
  
  
CATEGORY 8
 
  
 Action 8 
 
 
 
 
  

这是我的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 {display：block; / /

这是我修改过的小提琴

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

Answer 2

试试这个

 .dropdown:hover .dropdown-menu.category-overlay { opacity:1; } .category-overlay{ width:1190px; height:30px; opacity:0; background:#ddd; margin-top:30px; display:block; transition: all 2s ease 0s; } 

我希望你这对你的问题有用，