html - CSS 表格第一列背景

Question

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

只用 CSS 可以吗？提前致谢。

Answer 1

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

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;
}

<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>