Bootstrap 3.3.7 更改导航栏中折叠堆栈的悬停/活动颜色？答案

【问题标题】：Bootstrap 3.3.7 change hover / active color of collapsed stack in navbar?Bootstrap 3.3.7 更改导航栏中折叠堆栈的悬停/活动颜色？
【发布时间】：2018-05-29 02:04:07
【问题描述】：

使用 Bootstrap v3.3.7

尝试使用以下页面自定义导航栏颜色： https://getbootstrap.com/docs/3.3/customize/

除了导航栏向下折叠时，一切正常，即：

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" 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>

图标栏在折叠时显示如下（很好）：

但是，当我将鼠标悬停在图标栏上时，它们会显得褪色，即：

显然悬停/活动背景和前景色需要调整，但有哪些神奇的 LESS 变量需要更改？

目标是在悬停/点击等期间保持条形白色和背景蓝色。

提前致谢。

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

不确定是否可以通过自定义页面对其进行自定义，但您可以通过 css 定位和覆盖按钮样式。我相信您必须指定您正在使用的导航栏，因此如果您使用的是.navbar-default，那么您将执行以下操作：

.navbar-default .navbar-toggle:hover{
  background:none;
}

【讨论】：

【解决方案2】：

像这样尝试background-color: transparent;

.navbar .navbar-header .navbar-toggle:focus, 
.navbar .navbar-header .navbar-toggle:hover {
    background-color: transparent;
}

【讨论】：

【解决方案3】：

感谢两位回复的人 - 以下是成功的秘诀：

  .navbar-header .navbar-toggle:focus,
  .navbar-header .navbar-toggle:hover {
     background-color: transparent;
  }

【讨论】：