文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap 3.3.7更改导航栏中折叠堆栈的悬停/活动颜色？

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

Stack Overflow用户

提问于 2018-05-28 10:00:47

回答 3查看 574关注 0票数 0

使用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>

折叠后的图标栏如下所示(这很好)：

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

显然，悬停/活动背景和前景颜色需要调整，但需要更改的魔力较少的变量是什么？

目标是在悬停/单击等过程中保持条为白色，背景为蓝色。

提前谢谢。

css

twitter-bootstrap

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-05-29 02:04:08

感谢两位回复的人--下面的例子做到了：

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

票数 0

Stack Overflow用户

发布于 2018-05-28 10:21:23

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

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

票数 0

Stack Overflow用户

发布于 2018-05-28 11:42:19

像这样试试background-color: transparent;

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50558212

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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