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

问题描述

我试图让我的表格数据在悬停在表格行上时改变颜色。那可能吗？我试着到处搜索，但似乎没有一个符合我的描述。

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

table tr:hover {
  color: white
}

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

解决方法

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

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

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

,

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

tr {
  color: blue;
}

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

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

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

tr {
  color: blue;
}

tr:hover .accent {
  color: red;
}

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