悬停在其行上时如何更改特定表格单元格的颜色？ [关闭]答案

【问题标题】：How an I change the color of a specific table cell when hovering on its row? [closed]悬停在其行上时如何更改特定表格单元格的颜色？ [关闭]
【发布时间】：2021-07-21 23:58:26
【问题描述】：

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

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

table tr:hover {
  color: white
}

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

【问题讨论】：

更改表格数据颜色是什么意思？悬停在该行上时是否要更改该行的颜色？或者，您想更改该行的任何特定单元格的颜色？
我想更改该行的特定单元格。例如，当我将鼠标悬停在特定的表格行上时，具有“Hello World”的表格数据应该会改变颜色
不是我的意思。如果一行中有多个单元格怎么办？您要更改任何特定的单元格颜色还是整行颜色？
我认为悬停时没有区别，因为无论如何颜色都是黑色
而且颜色已经是黑色的，所以你甚至不会注意到此时的悬停

标签： html css html-table css-tables

【解决方案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 类的任何单元格设置颜色。

tr {
  color: blue;
}

tr:hover .accent {
  color: red;
}

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

【讨论】：

我也试过这个，但是当我将鼠标悬停在表格数据“greetings”上时，特定的表格数据“hello world”不会改变颜色
更新了答案并改变了整行，而不仅仅是单元格
您正在更改所有单元格的颜色。我不认为这是请求。
啊，看起来@j08691 有正确答案，但更新了答案，以防他也想做第一个孩子

【解决方案2】：

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

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

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

【讨论】：