CSS表格：鼠标悬停时更改背景颜色，包括交替行

Question

我创建了一个带表格的示例页面。如果将来该页面被删除，这里是 Pastebin 上的代码。

我想在悬停时突出显示表格行。它对普通 tr 起作用，但对 tr.alt (奇数行) 不起作用。

突出显示的代码：

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

制作奇数行不同颜色的代码:

tr.alt td
{
background: #daecf5;
}

有什么想法可以解决这个问题吗？

- pglaz

Answer 1

确保悬停效果的规则在 .alt 颜色之后，因为这会覆盖先前的规则，或者添加 !important 标记。

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

请注意，您正在将 .alt 行的背景色应用于单元格（td），这种颜色将出现在 tr 背景之前，因此请更改规则，使其同时适用于单元格或整个行。

- omma2289

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的支持，但我认为这并不会导致功能丢失，并且完全符合优雅降级的范围。

- Pevara

---

非常感谢您的提示！真是省了我不少时间！ - pglaz