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
}

如何在我的Bootstrap 3.3.6导航栏中更改悬停颜色？

3 个答案: