Html 更改悬停链接上引导程序导航栏的颜色？

Change color of bootstrap navbar on hover link?

提问by Callum

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>

回答by Leniel Maccaferri

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

对于Bootstrap 3，这是我根据默认导航栏结构执行此操作的方式：

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

回答by trebor1979

This is cleaner:

这更干净：

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

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

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

I also added :focusand :activeto the same declaration for accessibility reasons and for smartphone/tablet/touchscreen users.

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

回答by Seydou Loum

You can try this to change the link background on hover

你可以试试这个来改变悬停时的链接背景

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

回答by Zim

Updated 2018

2018 年更新

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

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

Bootstrap 4

引导程序 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

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

---

---

改变或 customize the entire Navbar color自定义整个导航栏颜色，请参阅：https://stackoverflow.com/a/18530995/171456https://stackoverflow.com/a/18530995/171456

回答by Gabriel Petrovay

You would have to overwrite the CSS rule:

您将不得不覆盖 CSS 规则：

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

or

或者

.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 afterthe Bootstrap CSS. For example:

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

.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 Navbarsection, you have the @navbarLinkColor.

还有一种选择，您可以在此处自定义您自己的 Boostrap 。在这种情况下，在导航栏部分，您有@navbarLinkColor.

回答by Kevin Lynch

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

定位您希望更改并用于!important覆盖分配给该元素的任何现有样式的元素。!important如果不是绝对必要，请确保不要使用声明。

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

回答by Ujjwal Kumar Gupta

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

回答by Farhan Ghaffar

Sorry for late reply. You can only use:

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

   nav a:hover{

                   background-color:color name !important;


                 }

回答by socialCoder

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

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

回答by Eric

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