在悬停链接上更改bootstrap导航栏的颜色?

时间:2013-05-18 15:35:25

标签: html css twitter-bootstrap colors navbar

我想知道当您将鼠标悬停在导航栏中时,如何更改链接的颜色,因为目前它们是一种难看的颜色。

感谢您的任何建议?

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>

13 个答案:

答案 0 :(得分:87)

对于 Bootstrap 3 ,这是我基于默认Navbar结构执行此操作的方式:

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #FFFF00;
    color: #FFC0CB;
}

答案 1 :(得分:47)

这更清洁:

ul.nav a:hover { color: #fff !important; }

没有必要比这更具体。不幸的是,在这种情况下,!important是必需的。

出于可访问性原因以及智能手机/平板电脑/触摸屏用户,我还在同一声明中添加了:focus:active

答案 2 :(得分:15)

您可以尝试更改悬停时的链接背景

.nav > li > a:hover{
    background-color:#FCC;
}

答案 3 :(得分:6)

您必须覆盖CSS规则:

.navbar-inverse .brand, .navbar-inverse .nav > li > a

.navbar .brand, .navbar .nav > li > a 

取决于您分别使用暗色还是浅色主题。要执行此操作,请添加包含覆盖规则的CSS,并确保它在HTML 之后引导CSS。例如:

.navbar .brand, .navbar .nav > li > a {
    color: #D64848;
}
.navbar .brand, .navbar .nav > li > a:hover {
    color: #F56E6E;
}

您还可以自定义自己的Boostrap here。在这种情况下,在 Navbar 部分中,您拥有@navbarLinkColor

答案 4 :(得分:6)

2018年更新

您可以使用CSS更改 Navbar链接颜色以覆盖Bootstrap颜色...

Bootstrap 4

.navbar-nav .nav-item .nav-link {
    color: red;
}
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link {
    color: pink;
}

Bootstrap 4 navbar link color demo

Bootstrap 3

.navbar .navbar-nav > li > a,
.navbar .navbar-nav > .active > a{
    color: orange;
}

.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
    color: red;
}

Bootstrap 3 navbar link color demo

<小时/> 更改或自定义整个导航栏颜色,请参阅:https://stackoverflow.com/a/18530995/171456

答案 5 :(得分:4)

定位您要更改的元素,并使用!important覆盖分配给该元素的所有现有样式。当不是绝对必要时,请务必不要使用!important声明。

div.navbar div.navbar-inner ul.nav a:hover {
    color: #fff !important; 
}

答案 6 :(得分:4)

.nav > li > a:focus, 
.nav > li > a:hover 
{
    text-decoration: underline;
    background-color: pink;
}

答案 7 :(得分:3)

使用Come thing链接,这是基于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;
}

答案 8 :(得分:3)

很抱歉迟到的回复。你只能使用:

   nav a:hover{

                   background-color:color name !important;


                 }

答案 9 :(得分:1)

这样的事情对我有用(使用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;
} 

在我的情况下,我还希望链接文字在悬停之前保持黑色,所以我添加了 .navbar-nav&gt; li>一个

.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;
} 

答案 10 :(得分:0)

如果 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样式更改导航栏品牌

的悬停颜色
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
     color: white;
}

因此,您的navbad-brand悬停颜色将更改为白色。我只是测试了它,它正确地为我工作。

答案 11 :(得分:0)

这应该足够了:

1 2 3 4 5 6
7 8 9 10 11 12
13 14 15 16 17 18

答案 12 :(得分:0)

.navbar-default .navbar-nav > li > a{
  color: #e9b846;
}
.navbar-default .navbar-nav > li > a:hover{
  background-color: #e9b846;
  color: #FFFFFF;
}