更改导航项的颜色（下拉 - 单击）答案

【问题标题】：Changing color of nav item (dropdown - click)更改导航项的颜色（下拉 - 单击）
【发布时间】：2017-01-10 23:32:38
【问题描述】：

每当我单击此导航项并单击其他位置时，或者我选择的页面打开导航项时，背景色都会变为此白色。我到处搜索并尝试了很多技巧。没有任何效果。

这是一个 gif 来展示一个清晰的例子。

网站设置在本地服务器上。因此，我无法提供任何链接

我使用引导程序。

但是，用于此导航栏的 div 和类是：

<div class="header-column">
    <div class="header-row">
        <div class="header-nav">
        <div class="header-nav-main header-nav-main-effect-1 header-nav-main-sub-effect-1 collapse">
        <ul class="nav nav-pills" id="mainNav">

提前致谢 =)

【问题讨论】：

你能发个链接吗？你在使用任何库吗？
你能发布一些复制问题的代码吗？我们无法仅通过屏幕截图来判断发生了什么。
是的，需要代码，但可能与伪相关，例如已访问、焦点或活动。
添加一些行可能会有所帮助

标签： javascript jquery html css

【解决方案1】：

a:link - 一个正常的、未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时的链接
a:active - 点击时的链接

示例：

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

【讨论】：

使用链接选择器更改背景颜色后，它可以工作并解决问题，但随后悬停背景更改不起作用。就像您尝试单击/悬停它时它是纯色一样。
有趣......它必须工作..这里的链接可以帮助你：w3schools.com/css/css_link.asp
戈德，我现在知道如何解决这个问题。谢谢=)

【解决方案2】：

你可以测试一下。

.nav-pills > li {
    background-color:transparent !important;
}

.nav-pills > li > a:hover,
.nav-pills > li > a:focus,
.nav-pills > li > a:active {
    background-color:#2e353e;
}

【讨论】：

添加后，没有任何反应。