6

我正在使用 jQuery 更改悬停时表格行的颜色,我注意到在以下情况下我得到了不同的结果。

CSS如下:

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

现在,我正在使用 jQuery 做悬停效果,使用以下代码:

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

奇怪的是,当我将鼠标悬停在一行上时class="normalcolor",背景颜色变为从.hovercolor。但是,当我悬停一行时class="reddishcolor",背景颜色不会改变。

这是正常的吗?如果是,为什么?跟颜色有关系吗?

谢谢!

4

2 回答 2

8

您是否完全按照该顺序指定了 CSS 类,还是.reddishcolor最后指定了该类?

当多个样式应用于一个元素时,将使用最具体的规则。如果规则同样具体(如您的情况),则使用最新规则。

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

tr.hovercolor {
  background-color: #f1e1c0;
}
于 2010-08-14T13:31:28.433 回答
1

您必须删除定义默认颜色的旧 CSS 类,然后添加定义悬停颜色的新类:

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

...或者您可以使用!importantCSS 关键字,使您的悬停颜色类优先于附加到元素的其他类:

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

注意:!importantIE6 和 FireFox 1.X 不支持该关键字。

...或者您可以更具体地确定悬停颜色类的范围:

.default-state { ... };
table .hover-state { ... }; /* more specific rules override less specific ones */
于 2010-08-14T13:32:06.127 回答