在悬停链接上更改引导导航栏的颜色？答案

【问题标题】：Change color of bootstrap navbar on hover link?在悬停链接上更改引导导航栏的颜色？
【发布时间】：2013-05-13 14:54:25
【问题描述】：

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

感谢您的建议？

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>

【问题讨论】：

谢谢，但以后请将您的 HTML（和任何其他代码）发布到问题本身中，这样观众就可以阅读。

标签： html css twitter-bootstrap colors navbar

【解决方案1】：

对于Bootstrap 3，这是我基于默认Navbar 结构的方式：

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

【讨论】：

赞成，因为特殊性不必使用！important。不是说 !important 有时不能使用，但我更喜欢这个。
对我来说，它使用导航栏而不是默认导航栏。显然取决于实现。

【解决方案2】：

这样更干净：

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

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

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

【讨论】：

尝试使用这是一个复杂的网站，不要破坏您的网站。您需要使用类名。如果你有另一个

【解决方案3】：

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

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

【讨论】：

请在您的回答中添加一些描述。
谢谢你 - 工作 - 但使用引导程序 4

【解决方案4】：

2018 年更新

您可以使用 CSS 更改 导航栏链接颜色 以覆盖 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

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

您必须覆盖 CSS 规则：

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

或

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

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

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

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

【讨论】：

嗯，当我搜索这两个语句时，它回来说找不到它们？我应该发布用于引导的 css 吗？

【解决方案6】：

定位您要更改的元素并使用!important 覆盖分配给该元素的任何现有样式。确保在非绝对必要时不要使用!important 声明。

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

【讨论】：

我找不到任何影响导航栏悬停的悬停语句。似乎 .navbar-link:hover, 语句会这样做，但它不会
如果您将我的代码复制并粘贴到您的 css 中，它将接管导航栏的当前属性并将其应用于悬停。

【解决方案7】：

使用Come thing link this，这是基于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】：

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

【讨论】：

【解决方案9】：

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

   nav a:hover{

                   background-color:color name !important;


                 }

【讨论】：

嘿 Farhan，这似乎与 trebor1979 在 2013 年 9 月 27 日回答时添加的解决方案完全相同，还是我在这里遗漏了一些细节？ :)对您收件箱中的垃圾评论感到抱歉。 stackoverflow UI 欺骗了我，让我提前提交评论。

【解决方案10】：

这样的事情对我有用（使用 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 > 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】：

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

【讨论】：

和其他答案有区别吗？

【解决方案12】：

如果你导航栏代码如下：

<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-brand

的悬停颜色

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

因此您的navbad-brand 悬停颜色将更改为白色。我刚刚对其进行了测试，它对我来说是正确的。

【讨论】：

【解决方案13】：

这就够了：

.nav.navbar-nav li a:hover {
  color: red;
}

【讨论】：

【解决方案14】：

这对我有帮助！

.navbar-light .navbar-nav > li > a:hover,
.navbar-light .navbar-nav > li > a:focus {
    color:  black;
}

【讨论】：