在折叠的导航栏组件中使用CSS更改glyphicon的颜色

Question

我在以下网站遇到问题：http://www.bestdiscointown.co.uk/

要查看此问题，请垂直调整网站大小，以便显示小的折叠导航栏。

在移动视口的导航栏中形成小按钮组件的HTML中，有3个<span>元素，其中包含类.icon-bar。我正在尝试使用CSS设置悬停和焦点状态的样式，以便条形图标的颜色为蓝色。

   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

Bootstrap设置默认颜色值：

.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #FFFFFF;
}

我不明白为什么我的CSS规则没有将条形图标的焦点和活动状态设置为蓝色，如下所示，它可能是CSS特异性问题：

.navbar-inverse .navbar-toggle .icon-bar:hover, .navbar-inverse .navbar-toggle .icon-bar:focus {
  color: #5979CD;
}

Answer 1

如果您希望图标栏元素为不同的颜色，当您将鼠标悬停在按钮上时，悬停和焦点规则应该在按钮上，如下所示：

.navbar-inverse .navbar-toggle:hover .icon-bar,
.navbar-inverse .navbar-toggle:focus .icon-bar
{
    background-color: #5979CD;
}

Answer 2

我认为你的styles.css（第75行）是覆盖bootstrap的

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
  background-color: #FFF;
}