CSS背景颜色优先级

Question

我将使用jQuery更改表格行的颜色，发现在以下几种情况下得到了不同的结果。

以下是CSS代码：

.normalcolor {
    background-color: #dedede;
}
.reddishcolor {
    background-color: #ffc59c;
}
.hovercolor {
    background-color: #f1e1c0;
}

现在，我正在使用jQuery完成hover效果，使用以下代码：

现在，我正在使用jQuery完成hover效果，使用以下代码:

$("table.withhover tr").hover(function(){
    $(this).addClass("hovercolor");
}, function(){
    $(this).removeClass("hovercolor");
});

奇怪的是，当我将鼠标悬停在具有class="normalcolor"的行上时，背景色会更改为.hovercolor中的颜色。然而，当我悬停在具有class="reddishcolor"的行上时，背景色不会更改。

这是正常的吗？如果是，为什么？这与颜色有关吗？

谢谢！

- Alex

---

你可能在table.withhover方面遇到了问题？你能否在jsbin.com上给我们提供一个实时示例？ - Sotiris

如果你查看这个jsfiddle: http://jsfiddle.net/wyZem/，你会看到简单的例子按照你所描述的工作。另外请注意，你可以使用toggleClass方法清理你的hover事件处理程序。 - Pat

@Sotiris，问题在CSS声明中。请查看已接受的答案。无论如何感谢您！ - Alex

Answer 1

您是否按照确切的顺序指定了CSS类，或者.reddishcolor类是最后指定的？

当一个元素有多个样式时，会使用最具体的规则。如果规则同样具体（如您的情况），则使用最新的规则。

如果您无法更改CSS规则的顺序，可以使悬停类更具体，例如通过同时指定元素名称：

tr.hovercolor {
  background-color: #f1e1c0;
}

- Guffa

Answer 2

您需要删除旧的CSS类，该类定义了默认颜色，然后添加新的类，该类定义了悬停颜色：

$().hover(function ()
{
    $(this).removeClass("default-color-class").addClass("hover-color-class");
});

... 或者你可以尝试使用 !important CSS 关键字来让你的鼠标悬停颜色类优先于附加在元素上的其他类：

.hover-state { color: #fff !important; }

注意：IE6和FireFox 1.X不支持!important关键字。

...或者你可以在悬停颜色类的作用域中更加具体。

.default-state { ... };
table .hover-state { ... }; /* more specific rules override less specific ones */

- cllpse