Question

我已经使用Bootstrap v3.0.0创建了导航菜单，我希望在显示分辨率小于某个值时使其崩溃。 Everuthing没问题，除了一件事 - 点击折叠菜单按钮后，按钮仍处于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;
}

Answer 2

请将以下代码添加到您的css：

@ media only screen and (max-width: 480px) {
     . navbar-toggle:hover {
         background-color: transparent! important;
     }
}

希望有帮助..！

Answer 3

查找.nav＆gt; li＆gt; a：悬停，.nav＆gt; li＆gt; a：在您正在使用的bootstrap css文件中聚焦并清除背景颜色（或在您自己的css样式表中覆盖它）

.nav>li>a:hover, .nav>li>a:focus {
text-decoration: none;
background-color: #eee; <-- delete that line
}

从bootstrap导航下拉菜单中的菜单图标中删除悬停状态

3 个答案: