Javascript HTML/CSS当前活动菜单不显示活动

请看

我在考虑这个工作

li a:hover:not(.active) {
    background-color: #111;
}

重置无活动颜色。但这是行不通的。主页链接保持绿色

因此，如何使活动链接显示为绿色

我有以下代码：

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

HTML

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

使用jquery尝试以下操作：

li a:悬停：未（.active）{
背景色：#111！重要；
}
李娜：停下来{
背景色：#444；
}
.主动{
背景色：#4CAF50；
}

$（“ul a”）。单击（函数（）{
$（“ul a”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
});

看看这个：

li a:not(.active):hover {
    background-color: #111;
}

li a.active:hover {
    background-color: #444;
}

---

首先是id/类选择器，然后是状态选择器。

CSS中的一个简单调整应该可以实现这一点

li:hover {
    background-color: #111!important;
}
li a.active:hover {
    background-color: #444!important;
}

---

你能包括你的JS吗？听起来你想要选择器

LIA.active:hover

-@SNash:对于你点击的链接，你需要JS附加

active

类。我认为您将

.active

类与

:active

伪选择器（不需要使用JS添加）混淆，但是

:active

伪选择器仅在鼠标按下链接时才适用。@SNash:您需要类似的选项。（你需要在点击菜单项后悬停）@Harry竖起大拇指寻找纯js解决方案伙伴：）不适合我。当我点击其他链接时，它们保持黑色。如果你想动态地改变链接的颜色（通过点击它们），那么你必须使用javascript为它们分配一个类，让它们的颜色由你选择。CSS不能通过它的self@SNash：如其他注释中所述，除非您使用一段javascript将活动类添加到所单击的元素中，否则它将更改。@droidbot:这正是我缺少的内容，不确定如何执行。你能提供一个Jfiddle吗？更新了我的答案，包含了你需要的javascript