在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它,它正在为我工​​作。