css - 从 Bootstrap 导航下拉菜单上的菜单图标中删除悬停状态

Question

我已经使用 Bootstrap v3.0.0 创建了导航菜单，我想让它在显示分辨率低于某个值时折叠。一切正常，除了一件事 - 单击折叠菜单按钮后，按钮保持在 hover 状态。这是我的按钮 html:

<nav class="navbar navbar-default header_st" role="navigation">
      <div class="navbar-header">
           <button type="button" id="toggle_footer_dropdown" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse_footer">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
           </button>
           <span class="navbar-brand" id="about_footer_links">
             <i>Show links</i>
           </span>
     </div>
...

</nav>

如何重置此按钮的悬停状态？

Answer 1

它不再有悬停状态，它现在有焦点状态。因为它是一个按钮，所以一旦你点击它，它就会有焦点。如果您随后单击其他地方，菜单将保持打开状态，但切换按钮将失去焦点并返回到其他样式。如果您想更改焦点样式但保留[悬停样式，您可以尝试以下操作:

.navbar-default .navbar-toggle:focus {
    background-color: transparent;
}