如何将鼠标悬停在 or 的任何部分上更改文本字体颜色？<td> <tr>

Question

我有一个没有背景的表，我希望<td>甚至整个<tr>在Hover上更改背景颜色和字体颜色。我知道如何更改悬停上的背景颜色和文本颜色

tr:hover {
background-color: #ddd;
color: black;
}

但是，如果我将鼠标悬停在实际文本上，这只会更改文本颜色；如果我将光标悬停在<td>/<tr>的任何部分上，而不一定是悬停在文本本身上，我希望同时更改文本和背景颜色。

Answer 1

我在网上发现了这个，它可能会帮助你：

<style style="text/css">
.hoverTable{
width:100%; 
border-collapse: collapse; 
}
.hoverTable td{ 
padding: 7px; 
border: #444fa6 1px solid;
}
/* Define the default color for all the table rows */
.hoverTable tr{
background-color: #6b76d1;
}
/* Define the hover highlight color for the table row */
.hoverTable tr:hover {
background-color: #9aa3ed;
color: #a456ba;
}
</style>
<table class="hoverTable">
<tr>
<td>Text 1A</td>
<td>Text 1B</td>
<td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td>
<td>Text 2B</td>
<td>Text 2C</td>
</tr>
<tr>
<td>Text 3A</td>
<td>Text 3B</td>
<td>Text 3C</td>
</tr>
</table>