更改 hover 鏈接上引導導航欄的顏色？

Question

我想知道當您在導航欄中按 hover 時如何更改鏈接的顏色，因為目前它們的顏色很難看。

謝謝你有什么建議嗎？

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顏色...

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導航欄鏈接顏色演示

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顏色 ，請參閱： https ： //stackoverflow.com/a/18530995/171456

Answer 6

定位您想要更改的元素並使用!important來覆蓋分配給該元素的任何現有樣式。 當不是絕對必要時，請務必不要使用!important聲明。

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

Answer 7

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

Answer 8

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

Answer 9

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

   nav a:hover{

                   background-color:color name !important;


                 }

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

Answer 11

如果你的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>

然后使用以下CSS樣式更改導航欄品牌的懸停顏色

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

因此，您的navbad-brand懸停顏色將更改為白色。 我只是測試了它，它正確地為我工作。

Answer 12

這應該足夠了：

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

Answer 13

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

Answer 14

這對我有幫助！

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

Answer 15

一段時間后，這對我有用。 僅更改 css。

.navbar-inner .navbar-brand:hover {
    color: #fff;
}

Answer 16

對於 Bootstrap 5，您可以簡單地使用：

.nav-link:hover{
    color: green;
}