12

我正在使用以下 css 更改导航栏下拉活动链接的背景颜色。

.navbar .nav > li.dropdown.open.active > a:hover, 
.navbar .nav > li.dropdown.open > a
{
   color: #fff;
   background-color: #b91773;
   border-color: #fff;
}

如屏幕截图所示,它会正确更改活动下拉链接的背景颜色。 在此处输入图像描述

但是,如果我为导航选项卡扩展相同的 css,它就不起作用。这是css类

.nav .nav-tabs > li.dropdown.open.active > a, 
.nav .nav-tabs > li.dropdown.open.active > a:hover
{
  color: #fff;
  background-color: #b91773;
  border-color: #fff;
}

这是输出 在此处输入图像描述

如何解决这个问题。

4

4 回答 4

18

我认为这应该有效:

.nav.nav-tabs > li.dropdown.active.open > a, 
.nav.nav-tabs > li.dropdown.active.open > ul.dropdown-menu a:hover,
.nav.nav-tabs > li.dropdown.open > a, 
.nav.nav-tabs > li.dropdown.open > ul.dropdown-menu a:hover
{
  color: #fff;
  background-color: #b91773;
  border-color: #fff;
}

请注意,在选择两者之间没有空格,.nav.nav-tabs而不是第二个后跟第一个。

插入符号:

.nav.nav-tabs > li.dropdown.active.open > a span.caret {border-top-color: #fff;border-bottom-color: #fff;}
于 2013-09-25T22:02:25.457 回答
1

您应该找到下拉菜单的确切类别。它可能在您的导航中,也可能不在。我改变了引导主题的分页属性的活动类颜色,如下所示:

ul.dropdown-menu>li.active>a:hover{
    background: #419641 !important;
}

ul.dropdown-menu>li.active>a{
    background: #51AB51 !important;
}
于 2015-12-04T01:33:34.803 回答
1

什么对我有用:

.navbar-default .navbar-nav .dropdown.open a:focus {
    background-color: #6dbcc9;
}
于 2016-09-08T16:07:54.107 回答
0

如果你能做一个jsfiddle会容易得多。如果没有,那么这就是你可以做的。

1-确保添加的选项卡完全位于“.nav .nav-tabs > li.dropdown.open.active”类中并且路径正确。如果没有,它不会工作。

2-因此,请确定您是否添加了不相关的课程,或者您没有添加相关课程。

于 2016-06-24T19:19:12.723 回答