如何在Bootstrap 3.3.6導航欄中更改懸停顏色？

Question

我必須做一些不尋常的事情，因為到目前為止，我在Stack Overflow上發現的相關問題和答案對我不起作用。 我是CSS的新手，所以答案可能很明顯。

我更喜歡避免!important的解決方案，並且如果可能的話，僅適用於網站標頭（例如，不適用於網站上的其他任何地方；也就是說，僅適用於id="my-block"內的內容）。

另外，想要解決方案以使其適用於導航中的所有級別（第一，第二等）。

這是我嘗試的：

.navbar .navbar-default > li > a:hover {
    background-color: #FFFF00;
    color: #FF0000;
}

這是在我的網站頂部運行的代碼：

<nav id="my-block" class="navbar navbar-default navbar-static-top navbar-default-siteheader navbar-inner-siteheader">
    <div class="container">
        <div class="collapse navbar-collapse in" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav navbar-right">

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu1<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        ...
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu2<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        ...
                    </ul>
                </li>

            </ul>

        </div>
    </div>
</nav>

Answer 1

更改

.navbar .navbar-default > li > a:hover

至

#my-block.navbar li a:hover

Answer 2

您可以在父元素中添加您的自定義ID，例如：

<div **id="custom-nav-head"**> 
 <ul>
     <li>Link</li>
 </ul>
</div>

然后在css文件中，在下面使用

**#custom-nav-head** .navbar .navbar-default > li > a:hover {
   color:     your color
}

如果仍然無法使用，請使用！important屬性。 喜歡 ：-

**#custom-nav-head** .navbar .navbar-default > li > a:hover {
   color:     your color **!important**;
}

Answer 3

嘗試這個：

a.dropdown:hover{
    background-color://whatever colour
}