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

Question

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

谢谢你的建议？

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>

Answer 1

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

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

Answer 2

这更清洁:

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

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

我还添加:focus并:active为辅助功能的原因和智能手机/平板电脑/触摸屏用户相同的声明.

Answer 3

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

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

Answer 4

您必须覆盖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;
}

还有,你自定义自己的自举替代这里.在这种情况下,在Navbar部分,您有@navbarLinkColor.

Answer 5

更新于2018

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

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