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

I want to know how to change the color of the links when you hover over them in the nav bar, as currently they are an ugly color.

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

Thanks for any suggestions?

谢谢你的建议？

HTML:

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>

11 个解决方案

#1

For Bootstrap 3 this is how I did this based on the default Navbar structure:

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

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

#2

This is cleaner:

这更清洁：

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

There's no need to get more specific than this. Unfortunately, the !important is necessary in this instance.

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

I also added :focus and :active to the same declaration for accessibility reasons and for smartphone/tablet/touchscreen users.

我还添加了：焦点和：由于可访问性原因以及智能手机/平板电脑/触摸屏用户的相同声明而激活。

#3

You can try this to change the link background on hover

您可以尝试此操作来更改悬停时的链接背景

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

#4

You would have to overwrite the CSS rule:

您必须覆盖CSS规则：

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

要么

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

depending if you are using the dark or light theme, respectively. To do this, add a CSS with your overwritten rules and make sure it comes in your HTML after the Bootstrap CSS. For example:

取决于您分别使用暗色还是浅色主题。为此，请使用覆盖的规则添加CSS，并确保它在Bootstrap CSS之后出现在HTML中。例如：

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

There is also the alternative where you customize your own Boostrap here. In this case, in the Navbar section, you have the @navbarLinkColor.

您也可以在此处自定义自己的Boostrap。在这种情况下，在Navbar部分中，您有@navbarLinkColor。

#5

Target the element you wish to change and use !important to overwrite any existing styles that are assigned to that element. Be sure not to use the !important declaration when it is not absolutely necessary.

定位您想要更改的元素并使用！important来覆盖分配给该元素的任何现有样式。当不是绝对必要时，请务必不要使用！important声明。

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

#6

Use Come thing link this , This is Based on Bootstrap 3.0

使用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;
}

#7

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

#8

Sorry for late reply. You can only use:

抱歉回复晚了。你只能使用：

   nav a:hover{

                   background-color:color name !important;


                 }

#9

Updated 2018

2018年更新

You can change the Navbar link colors with CSS to override Bootstrap colors...

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

Bootstrap 4

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 4导航栏链接颜色演示

Bootstrap 3

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

Bootstrap 3导航栏链接颜色演示

The change or customize the entire Navbar color, see: https://*.com/a/18530995/171456

#10

Something like this has worked for me (with Bootstrap 3):

这样的东西对我有用（使用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;
}

In my case I also wanted the link text to remain black before the hover so i added .navbar-nav > li > a

在我的情况下，我还希望链接文本在悬停之前保持黑色，所以我添加.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;
}

#11

If you Navbar code as like as follow:

如果您使用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>

Then just use the following CSS style to change hover color of your navbar-brand

然后使用以下CSS样式更改导航栏品牌的悬停颜色

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
     color: white;
}

So your navbad-brand hover color will be changed to white. I just tested it and it's working for me correctly.

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

#1