如何实现表格hover时仅高亮前两列、最后一列无高亮效果？

核心需求 #

当鼠标悬停在表格前两列的任意一列时，这两列同时高亮；悬停第三列时无任何高亮变化。

方案一：纯CSS（现代浏览器推荐） #

利用CSS的:has()选择器实现精准联动，代码简洁高效：

HTML结构示例

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1列1</td>
      <td>行1列2</td>
      <td>行1列3</td>
    </tr>
    <tr>
      <td>行2列1</td>
      <td>行2列2</td>
      <td>行2列3</td>
    </tr>
    <!-- 更多行... -->
  </tbody>
</table>

CSS样式

/* 表格基础样式（可按需调整） */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  transition: background-color 0.2s ease;
}

th {
  background-color: #f8f8f8;
}

/* 前两列联动高亮逻辑 */
tr:has(td:nth-child(-n+2):hover) td:nth-child(-n+2),
tr:has(th:nth-child(-n+2):hover) th:nth-child(-n+2) {
  background-color: #e8f4f8;
}

说明：

• :has()选择器会检测当前行内是否有前两列被hover，一旦满足条件，就给同一行的前两列（包括表头）添加高亮背景。
• 过渡动画让高亮效果更平滑，可根据需求移除。

方案二：兼容旧浏览器（无:has()支持） #

如果需要兼容不支持:has()的旧版浏览器，可结合JavaScript实现：

额外CSS类

.highlight {
  background-color: #e8f4f8;
}

JavaScript代码

// 选中所有前两列的单元格（包括表头）
const targetCells = document.querySelectorAll('td:nth-child(-n+2), th:nth-child(-n+2)');

// 绑定鼠标进入事件
targetCells.forEach(cell => {
  cell.addEventListener('mouseenter', () => {
    const row = cell.parentElement;
    // 给当前行的前两列添加高亮类
    row.querySelectorAll('td:nth-child(-n+2), th:nth-child(-n+2)').forEach(col => {
      col.classList.add('highlight');
    });
  });

  // 绑定鼠标离开事件
  cell.addEventListener('mouseleave', () => {
    const row = cell.parentElement;
    // 移除高亮类
    row.querySelectorAll('td:nth-child(-n+2), th:nth-child(-n+2)').forEach(col => {
      col.classList.remove('highlight');
    });
  });
});

说明：

• 通过监听前两列单元格的hover事件，动态给当前行的前两列添加/移除高亮类，实现联动效果。
• 该方案兼容所有主流旧浏览器，无CSS选择器兼容性限制。

内容的提问来源于stack exchange，提问作者Tristan Tan