CSS表格第一列背景

Question

我正在尝试使用CSS来更改表格单元格的背景。 如果连续的第一个单元格悬停在上面，我只希望该单元格具有红色背景。 如果行中的任何其他单元格悬停在上面，我希望行中的所有单元格都是绿色，除了第一个单元格外。

只有CSS才有可能吗？ 提前谢谢。

Answer 1

您应该能够通过设置行悬停的样式来实现类似的功能，然后使用相邻的选择器重置样式：

＆＃13;

＆＃13;

tr:hover td {
  background: green;
}
tr:hover td:first-child,
tr td:first-child:hover ~ td {
  background: transparent;
}
tr td:first-child:hover {
  background: red;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>    
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;