html - 如何更改文本字体颜色，同时将鼠标悬停在 a 或 的任何部分？

Question

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

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

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

标签： htmlcss

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>