css - 无法更改 Bootstrap 中图标栏的颜色

Question

当我在单击图标栏(出现在移动设备或放大时)后取消悬停它时，颜色变回默认值。它不应该在悬停/鼠标移出后改变颜色。

这是我网站的链接:https://bgrnature.herokuapp.com/

html:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span>
</button>

我试过了，还是不行:

.navbar-default .navbar-toggle{
    background: #51a746;
    color: #fff !important;
    border-color: #51a746;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-default .navbar-toggle:hover{
    background-color: #51a746;
}

Answer 1

问题不在于 .navbar-toggle 的 :hover，而在于 :focus。要解决此问题，请在您的 css 中更改此以解决此问题:

替换这个:

.navbar-default .navbar-toggle:hover{
    background-color: #51a746;
}

用这个:

 .navbar-default .navbar-toggle:focus {
     background-color: #51a746;
 }