在悬停时隐藏没有js的css类

Question

我有一个html菜单：

<ul>
<li><a href="#" class="active">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>

和css：

ul li a{
     color: black;
}
ul li a:hover, ul li a.active{ /* it was ul li a:hover for two times */
     color: red;
}

当我在一个非活动元素上盘旋时，有两个红色元素，这是正常的。 问题是仅改变悬停元素的颜色并在活动时将其移除（变为黑色）。 没有JS，有没有诀窍呢？

编辑：发生错误。 ctrl-c - ＆gt; ctrl-v是邪恶的

Answer 1

假设你的ul元素不大于你所占据的空间：

ul:hover a.active
{
    color: black;
}

或者可能是肖恩的答案，取决于你是在谈论班级活跃还是链接状态。

Answer 2

ul li a:active {
     color: black;
}