html - 悬停时隐藏没有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 -> ctrl-v 是邪恶的

Answer 1

假设您的 ul 元素不大于 li 占用的空间:

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

或者可能是 Shawn 的回答，这取决于您是在谈论类(class)事件还是链接状态。