css - 表格中的文本和背景颜色

Question

我有一个表格，我希望当鼠标悬停在其上时，单元格的内容及其背景会改变颜色。所以我尝试了以下 CSS

td {
  background-color: white;
  color: black;
}

td:hover {
  background-color: black;
  color: white;
}

<table width="150px">
  <tr>
    <td><a href="www.testing.com">testing</a></td>
  </tr>
</table>

看似简单，其实行不通。背景会改变颜色，而文本不会。

我错在哪里？我该如何纠正？

Answer 1

好的，链接通常应用了自己的悬停样式，因此您需要定位表格中的链接以更改其颜色:

td {
  background-color: white;
  color: black;
}

td:hover {
  background-color: black;
  color: white;
}

td:hover a {     /* only target links in a td cell that is hovered */
  color: white;
}

<table width="150px">
  <tr>
    <td><a href="www.testing.com">testing</a></td>
  </tr>
</table>