如何让悬停状态保持至少1秒?目前很难选择子菜单项,因为悬停状态过早消失。
这是jsFiddle。
我的HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div>
<span>Logo+Text</span>
</div>
<div class="btn-group has_dropdown" style="margin-left: 200px">
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Lists</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">Sub List 1</a>
</li>
<li>
<a href="#">Sub List 2</a>
</li>
<li>
<a href="#">Sub List 3</a>
</li>
<li>
<a href="#">Sub List 4</a>
</li>
<li>
<a href="#">Sub List 5</a>
</li>
</ul>
</div>
</div>
</div>
</div>
和CSS:
#headerDropdown .dropdown:hover .dropdown-menu,
.btn-group:hover .dropdown-menu {
display: inline-flex !important;
}
答案 0 :(得分:5)
您可以将transition
与delay
一起使用。但是您无法将其与display
属性一起使用,请改为使用visibility
。
.btn-group .dropdown-menu {
display: inline-flex;
transition: all 0s ease 1s; /*delay 1s*/
visibility: hidden;
}
.btn-group:hover .dropdown-menu {
transition-delay: 0s;
visibility: visible;
}
<强> Updated jsFiddle 强>
答案 1 :(得分:0)
如果您有css3支持,转换延迟是一个不错的选择。否则,一个简单的jquery解决方案就足够了。
$(".dropdown-toggle").hover(function() {
$(this).addClass("active");
},
function() {
var dropdown = $(this);
window.setTimeout(function(){
$(dropdown).removeClass("active");
}, 1000);
});