twitter-bootstrap Bootstrap：更改下拉菜单的活动链接颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17323224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: changing dropdown menu's active link color
提问by matdev
I am trying to change the color and background color of the active link in a boostrap's dropdown menu.
我正在尝试更改 boostrap 下拉菜单中活动链接的颜色和背景颜色。
I have overriden bootstrap's @dropdownLinkColorActive and @dropdownLinkBackgroundActive variables but this has no effet.
我已经覆盖了引导程序的 @dropdownLinkColorActive 和 @dropdownLinkBackgroundActive 变量，但这没有效果。
The css for ".navbar-inverse .nav .active > a" takes over, as seen in firebug:
".navbar-inverse .nav .active > a" 的 css 接管，如萤火虫所示：
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
background-color: #FFFFFF;
color: #4D4D4F;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
background-color: #16A170;
background-image: linear-gradient(to bottom, #17AA76, #149466);
background-repeat: repeat-x;
color: #FFFFFF;
outline: 0 none;
text-decoration: none;
}
Why is the .navbar-inverse class overriding the .dropdown-menu class ?
为什么 .navbar-inverse 类会覆盖 .dropdown-menu 类？
回答by ImThatPedoBear
Probably cause the dropdown is in the navbar.
可能是因为下拉菜单在导航栏中。
This one should work
这个应该工作
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
background-color: #16A170 !important;
background-image: linear-gradient(to bottom, #17AA76, #149466) !important;
background-repeat: repeat-x !important;
color: #FFFFFF;
outline: 0 none;
text-decoration: none;
}
回答by Massimo Ivaldi
assume the backgroud-color you need is #fff write this:
假设你需要的背景颜色是 #fff 写这个：
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
text-decoration: none;
color: #333333;
background-color: #fff;
background-image: -moz-linear-gradient(top, #fff, #fff);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#fff));
background-image: -webkit-linear-gradient(top, #fff, #fff);
background-image: -o-linear-gradient(top, #fff, #fff);
background-image: linear-gradient(to bottom, #fff, #fff);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#fff', GradientType=0);
}
