取消悬停后使 CSS 悬停状态保持不变答案

【问题标题】：Make CSS hover state remain after unhovering取消悬停后使 CSS 悬停状态保持不变
【发布时间】：2016-05-08 13:55:08
【问题描述】：

如何使悬停状态保持至少 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;
}

【问题讨论】：

stackoverflow.com/a/14513707/3536236 这个答案可能对您有所帮助。使用 CSS 转换延迟
如果你添加 ", .dropdown-menu:hover" 到你的选择器，你可能会避免你的问题。

标签： html twitter-bootstrap css

【解决方案1】：

您可以将 CSS 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

【讨论】：

【解决方案2】：

如果您支持 css3，则转换延迟是一个不错的选择。否则，一个简单的 jquery 解决方案就足够了。

$(".dropdown-toggle").hover(function() {
    $(this).addClass("active");
}, 
function() {
    var dropdown = $(this);
    window.setTimeout(function(){
        $(dropdown).removeClass("active");
    }, 1000);
});

【讨论】：