css - 如何设置表格每隔一行的背景色并在悬停时突出显示行？

Question

我正在尝试制作一个表格，每隔一行具有不同的背景颜色，并在悬停时突出显示该行。它们都可以完全分开工作，但是当您将它们放在一起时，悬停时突出显示不起作用。这是我的 CSS。我可能必须通过使用 Javascript 来完成其中一项功能...

.tableData tr:hover {
background-color: #ffff99;
}

.tableData tr:nth-child(even) { /*(even) or (2n 0)*/
background: #f1f1f1;
}
.tableData tr:nth-child(odd) { /*(odd) or (2n 1)*/
background: #FFF;
}

Answer 1

尝试将 :hover 选择器放在其他选择器之后:

.tableData tr:nth-child(even) { /*(even) or (2n 0)*/
background: #f1f1f1;
}
.tableData tr:nth-child(odd) { /*(odd) or (2n 1)*/
background: #FFF;
}

.tableData tr:hover {
background-color: #ffff99;
}