CSS实现表格单元格hover背景差异化效果技术问询

当然可以！这种针对表格行内不同单元格的差异化hover交互，纯CSS完全能实现，核心是用好CSS的伪类和选择器组合来精准定位元素。下面我给你拆解实现逻辑并附上完整代码：

实现逻辑拆解 #

1. 鼠标hover第一个单元格时仅自身变红 #

直接给表格的第一个单元格（:first-child）绑定:hover伪类，设置背景色为红色即可——这个逻辑很直接，我们只需要作用于触发hover的那个单元格本身。

2. 鼠标hover该行其他单元格时，除第一个外的单元格变绿 #

这里需要用到父元素hover + 排除选择器的组合：当鼠标hover在任意非第一个单元格时，整个<tr>（行元素）会自动继承hover状态，所以我们可以通过tr:hover选中当前行，再用:not(:first-child)排除第一个单元格，给剩下的单元格设置绿色背景。这样就能保证第一个单元格在这种场景下不受影响。

完整代码示例 #

<table border="1" cellpadding="8" cellspacing="0">
  <tr>
    <td>第一列单元格1</td>
    <td>第二列单元格1</td>
    <td>第三列单元格1</td>
  </tr>
  <tr>
    <td>第一列单元格2</td>
    <td>第二列单元格2</td>
    <td>第三列单元格2</td>
  </tr>
</table>

/* 需求1：hover第一个单元格时仅自身变红 */
td:first-child:hover {
  background-color: #ff3333;
  color: white; /* 搭配白色文字提升可读性 */
}

/* 需求2：hover该行其他单元格时，除第一个外的单元格变绿 */
tr:hover td:not(:first-child) {
  background-color: #90ee90;
}

/* 可选：添加过渡动画，让hover效果更平滑自然 */
td {
  transition: background-color 0.2s ease;
}

你可以测试这段代码：当鼠标放到第一列的任意单元格上，只有它会变成红色；当鼠标放到同一行的其他单元格上，该行除第一列外的所有单元格都会变成浅绿色，完全符合你的需求，全程不需要任何JavaScript。

内容的提问来源于stack exchange，提问作者Quentin Samuelson