当下拉菜单被点击和悬停在其上时更改颜色

Question

我的下拉菜单在被点击后会回到默认颜色navbar-default，而当我在下拉菜单中的项目上悬停时，它们也会回到navbar-default颜色。

这是我的问题截图:

这是我的HTML代码:

    <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Cable</a></li>
                    <li><a href="#">DSl</a></li>
                    <li><a href="#">Wireless</a></li>
                    <li><a href="#">Business Cable</a></li>
                    <li><a href="#">Business DSL</a></li>
                </ul>
            </li>
            <li><a href="#">Phone</a></li>
            <li><a href="#">Android TV</a></li>
            <li><a href="#">Shaw Direct</a></li>
            <li><a href="#">Careers</a></li>
        </ul>
    </div> 

以下是我的CSS样式：

.navbar-default {
    background-color: #00AEFE;
}
.navbar-default:visited {
    background-color: #00AEFE;
}
ul.dropdown-menu {
    background-color: #00AEFE;
}
ul.dropdown-menu:hover {
    background-color: #00AEFE;
}

- Thomas Hutton

---

尝试添加！important，例如 background-color: #00AEFE !important;。这应该会强制使特定的样式最为重要。 - Kraang Prime

可能是在Twitter Bootstrap 3中更改导航栏颜色的重复问题。 - vanburen

您还没有提出问题，或者包含足够的CSS来解决任何问题。如果您正在谈论单击元素时看到的颜色（在按住左键时），那就是:active伪类。 - Jon Uleis

Answer 1

只需覆盖 Bootstrap 类即可实现此操作。

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
   background-color: #00AEFE;
}
.nav > li > a:focus, .nav > li > a:hover {
   background-color: #00AEFE;
}

请检查代码片段是否符合您的需求？运行代码片段并将其切换到全屏模式，然后进行检查。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>
ul.dropdown-menu {
    background-color: #00AEFE;
}
ul.dropdown-menu:hover {
    background-color: #00AEFE;
}
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
    background-color: #00AEFE;
}
.nav > li > a:focus, .nav > li > a:hover {
    background-color: #00AEFE;
}

</style>
<div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Cable</a></li>
                    <li><a href="#">DSl</a></li>
                    <li><a href="#">Wireless</a></li>
                    <li><a href="#">Business Cable</a></li>
                    <li><a href="#">Business DSL</a></li>
                </ul>
            </li>
            <li><a href="#">Phone</a></li>
            <li><a href="#">Android TV</a></li>
            <li><a href="#">Shaw Direct</a></li>
            <li><a href="#">Careers</a></li>
        </ul>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

- Jishnu V S