在悬停后让CSS悬停状态保持不变 [英] Make CSS hover state remain after unhovering

问题描述

我怎样才能让悬停状态保持至少1秒？目前很难选择子菜单项，因为悬停状态消失得太快。

这里是 jsFiddle 。

我的HTML：

 < div class =container > 
< div class =row> 
< div class =col-md-12> 
< div> 
< span>徽标+文字< / span> 
< / div> 
< div class =btn-group has_dropdownstyle =margin-left：200px> 
< a href =＃class =btn btn-default dropdown-toggledata-toggle =dropdown>列表< / a> 
< ul class =dropdown-menurole =menu> 
< li> 
< a href =＃>小组列表1< / a> 
< / li> 
< li> 
< a href =＃>小组列表2< / a> 
< / li> 
< li> 
< a href =＃>小组列表3< / a> 
< / li> 
< li> 
< a href =＃>小组清单4< / a> 
< / li> 
< li> 
< a href =＃>小组清单5< / a> 
< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
< / div> 
  

和CSS：

  #headerDropdown .dropdown：hover .dropdown-menu，
 .btn-group：hover .dropdown-menu {
 display：inline-flex！important; 
 
  

解决方案

您可以使用CSS transition ，并且 delay 。但是你不能在显示属性中使用它，所以用 visibility 代替它。

  .btn-group .dropdown-menu {
 display：inline-flex; 
过渡：所有0均缓解1秒; / *延迟1秒* / 
可见性：隐藏; 
} 
 .btn-group：hover .dropdown-menu {
 transition-delay：0s; 
可见性：可见; 
} 
  

更新了jsFiddle

How can I make the hover state remain for at least 1 second? Currently it is difficult to select the sub menu items as the hover state disappears too soon.

Here is the jsFiddle.

My 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>

And CSS:

#headerDropdown .dropdown:hover .dropdown-menu,
.btn-group:hover .dropdown-menu {
    display: inline-flex !important;
}

解决方案

You can use CSS transition with delay. But you can't use it with display property, So do it with visibility instead.

.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

这篇关于在悬停后让CSS悬停状态保持不变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！