html - 如何覆盖和重置悬停规则中的背景颜色属性？

Question

有没有办法重置 :hover 规则的背景颜色属性？

我有一个元素列表，当鼠标经过时这些元素会突出显示。我想应用一个额外的 CSS 规则来禁用突出显示。这是一个演示:

http://jsfiddle.net/vqLuU/1/

为了完全禁用突出显示，我应该在“style1:hover”规则的第二次出现中添加什么？结果必须与删除所有“style1:hover”规则时的大小写相同。

我不想再次重新定义所有样式(“绿色”和“蓝色”)。我的目标是禁用“style1:hover”规则。

HTML:

<div class="style1 green">AAA</div>
<div class="style1 blue">BBB</div>

CSS:

.green {
    background-color: green;
}
.blue {
    background-color: blue;
}
.style1:hover {
    background-color: red;
}

.style1:hover {
    /* How to disable highlighting from here? */

}

谢谢!

Answer 1

由于 .style1:hover 规则的首次出现无法更改或删除，实现这一点的唯一方法是添加以下规则:

.green:hover {
    background-color: green;
}
.blue:hover {
    background-color: blue;
}

我觉得有必要添加免责声明:这个解决方案不是很优雅，我不认为它是最好的解决方案，我认为它是唯一的 根据要求可能的解决方案。