我有一个表格,我希望当鼠标悬停在其上时,单元格的内容及其背景会改变颜色。所以我尝试了以下 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>
看似简单,其实行不通。背景会改变颜色,而文本不会。
我错在哪里?我该如何纠正?
最佳答案
好的,链接通常应用了自己的悬停样式,因此您需要定位表格中的链接以更改其颜色:
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>
关于css - 表格中的文本和背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53430991/