在hover链接上更改bootstrap导航栏的颜色？
我想知道如何改变链接的颜色，当你把它们hover在导航栏，因为目前他们是一个丑陋的颜色。
感谢您的任何build议？
HTML：
<div class="container"> <div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link One</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> </ul> </div> </div> </div> 对于Bootstrap 3，这是基于默认的Navbar结构做到的：
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #FFFF00; color: #FFC0CB; }
这是更清洁的：
ul.nav a:hover { color: #fff !important; }
没有必要比这更具体。 不幸的是，在这种情况下， !important是必要的。
我还补充道:focus和:active为了可访问性原因以及针对智能手机/平板电脑/触摸屏用户的相同声明。
你可以尝试这个来改变hover的链接背景
.nav > li > a:hover{ background-color:#FCC; }
你将不得不覆盖CSS规则：
.navbar-inverse .brand, .navbar-inverse .nav > li > a
要么
.navbar .brand, .navbar .nav > li > a
这取决于你是分别使用黑暗还是轻的主题。 要做到这一点，添加一个CSS覆盖的规则，并确保它在Bootstrap CSS 后 HTML。 例如：
.navbar .brand, .navbar .nav > li > a { color: #D64848; } .navbar .brand, .navbar .nav > li > a:hover { color: #F56E6E; }
在这里你也可以select你自己的Boostrap。 在这种情况下，在Navbar部分，您有@navbarLinkColor 。
定位您希望更改的元素，并使用!important来重写分配给该元素的任何现有样式。 当不是绝对必要时，请不要使用!important声明。
div.navbar div.navbar-inner ul.nav a:hover { color: #fff !important; }
使用来链接这个，这是基于Bootstrap 3.0
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color: #977EBD; color: #FFFFFF; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #977EBD; color: #FFFFFF; }
.nav > li > a:focus, .nav > li > a:hover { text-decoration: underline; background-color: pink; }
像这样的东西已经为我工作（与Bootstrap 3）：
.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{ font-family: proxima-nova; font-style: normal; font-weight: 100; letter-spacing: 3px; text-transform: uppercase; color: black; }
在我的情况下，我也希望链接文本在hover前保持黑色，所以我添加了.navbar-nav> li> a
.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-nav > li > a{ font-family: proxima-nova; font-style: normal; font-weight: 100; letter-spacing: 3px; text-transform: uppercase; color: black; }
抱歉回复晚了。 你只能使用：
nav a:hover{ background-color:color name !important; }
如果你的Navbar代码如下所示：
<div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="../navbar/">Default</a></li> <li><a href="../navbar-static-top/">Static top</a></li> <li class="active"><a href="./">Fixed top</a></li> </ul> </div><!--/.nav-collapse --> </div>
然后，只需使用以下CSS样式来更改导航栏品牌的hover颜色
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: white; }
所以你的navbad-brandhover颜色将被改为白色。 我只是testing它，它正在为我工作。
