悬停时隐藏没有js的css类答案

【问题标题】：hide css class without js on hover悬停时隐藏没有js的css类
【发布时间】：2012-01-03 23:01:56
【问题描述】：

我有一个 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 是邪恶的

【问题讨论】：

你的 CSS 看起来有问题。应该是ul li a.active, ul li a:hover 而不是ul li a:hover, ul li a:hover？
ul li a:active {color: black; }

标签： html css

【解决方案1】：

假设你的 ul 元素不大于你的 li 占用的空间：

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

或者可能是 Shawn 的回答，具体取决于您是在谈论课程活动还是链接状态。

【讨论】：

【解决方案2】：

ul li a:active {
     color: black;
}

【讨论】：