将鼠标悬停在特定 table 单元格的行上时，我如何更改其颜色？

Question

我试图让我的 table 数据在悬停在 table 行上时改变颜色。那可能吗？我试着到处搜索，但 none 似乎与我的描述相符。

我只想在悬停在 table 行上时更改“Hello World”的颜色。因此，当我将鼠标悬停在 table 行中的任何位置时 ，只有 table 数据“Hello World”会改变颜色。

table tr:hover { color: white }

<table> <tbody> <tr> <td> Hello World </td> <td> Greetings </td> </tr> </tbody> </table>

Answer 1

这将设置悬停该行时第一个单元格的颜色。

tr {
  color: blue;
}

tr:hover td:first-child {
  color: red;
}

<table>
  <tbody>
<tr>
  <td> Hello World </td>
  <td> Greetings </td>
</tr>
  </tbody>
</table>

当行悬停时，这将为具有 accent class 的任何单元格设置颜色。

tr {
  color: blue;
}

tr:hover .accent {
  color: red;
}

<table>
  <tbody>
<tr>
  <td class="accent"> Hello World </td>
  <td> Greetings </td>
</tr>
  </tbody>
</table>

Answer 2

如果您只想在将鼠标悬停在 table 行的任何部分上时更改特定单元格，请为该单元格指定一个 class 并在您的选择器中使用它：

table tr:hover td.change{
  color: white
}

<table>
  <tbody>
    <tr>
      <td class="change"> Hello World </td>
      <td> Greetings </td>
    </tr>
  </tbody>
</table>

How an I change the color of a specific table cell when hovering on its row?