66

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

感谢您的任何建议？

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

14 回答 14

90

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

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #FFFF00;
    color: #FFC0CB;
}
于 2013-10-06T00:00:08.433 回答
55

这更干净：

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

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

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

于 2013-09-27T20:34:44.260 回答
17

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

.nav > li > a:hover{
    background-color:#FCC;
}
于 2015-06-26T06:31:41.183 回答
12

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

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

更改或自定义整个导航栏颜色，请参阅：https ://stackoverflow.com/a/18530995/171456

于 2018-03-21T12:02:13.147 回答
7

您将不得不覆盖 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;
}

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

于 2013-05-18T15:40:34.390 回答
4

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

div.navbar div.navbar-inner ul.nav a:hover {
    color: #fff !important; 
}
于 2013-05-18T15:45:23.557 回答
4

使用 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;
}
于 2013-08-21T18:17:49.477 回答
4 
.nav > li > a:focus, 
.nav > li > a:hover 
{
    text-decoration: underline;
    background-color: pink;
}
于 2016-02-10T13:24:37.977 回答
4

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

   nav a:hover{

                   background-color:color name !important;


                 }
于 2017-06-07T10:29:34.473 回答
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 > 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;
}
于 2014-06-03T15:20:34.597 回答
1 

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

于 2019-08-19T06:07:15.673 回答
0

如果您的导航条代码如下所示：

<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悬停颜色将变为白色。我刚刚对其进行了测试，它对我来说是正确的。

于 2013-08-24T21:50:08.407 回答
0

这对我有帮助！

.navbar-light .navbar-nav > li > a:hover,
.navbar-light .navbar-nav > li > a:focus {
    color:  black;
}
于 2022-02-08T00:46:38.260 回答
0

这应该足够了：

.nav.navbar-nav li a:hover {
  color: red;
}
于 2019-01-08T10:49:21.633 回答