CSS表：在悬停时更改背景，包括替代行

Question

我创建了一个带有表格的示例页面。如果页面将来被删除，请在Pastebin上使用here's代码。

我想在悬停时突出显示表格行。它适用于普通tr，但它不适用于tr.alt（奇数行）。

突出显示代码：

tr:hover,tr.alt:hover
{
background: #f7dcdf;
}

使奇数行有不同颜色的代码：

tr.alt td
{
background: #daecf5;
}

任何想法如何解决这个问题？

Answer 1

确保悬停效果的规则低于.alt颜色，因为这会覆盖之前的规则或添加!important

tr:hover,tr.alt:hover
{
    background: #f7dcdf!important;
}

另请注意，您正在将.alt行的背景颜色应用于单元格（td's），此颜色将显示在tr背景的“前面”，因此请更改规则，以便两者都用于单元格或整个行< / p>

Answer 2

根据css级联规则，问题是tr.alt td比tr.alt:hover更具体。

简单的方法是确保:hover规则比.alt规则更具体。这可以通过将tr.alt td更改为tr.alt

来完成

作为旁注，您是否意识到您不需要.alt类来定位奇数行？有一个非常有用的:nth-child()伪类可以为您处理。你可以在这里阅读所有相关内容：http://css-tricks.com/how-nth-child-works/

我冒昧地将此应用于您的样本：http://jsfiddle.net/3tV9b/
请注意，我所做的只是将tr.alt td更改为tr:nth-child(2n+1)并删除了所有具有.alt类的选择器。

这种技术的一大优点是你不需要为维护HTML而烦恼，你可以根据需要添加和删除行，并且交替的颜色应该继续工作。

缺点是（偏离）IE中的支持，但我认为这并不是真正的功能损失，并且在优雅降级的范围内。