能否仅用CSS实现HTML表格同class行的联动悬停高亮？

问题描述 #

现有两个HTML表格，行使用相同的class名称，当前CSS仅能实现单个行悬停时自身背景变红，想仅用CSS（不借助JavaScript）实现：鼠标悬停某一行时，两个表格里所有同class的行同时改变背景色。

原HTML结构：

<div class="tables">
  <table>
    <tr class="row-1">
      <td>row 1, col 1</td>
      <td>row 1, col 2</td>
    </tr>
    <tr class="row-2">
      <td>row 2, col 1</td>
      <td>row 2, col 2</td>
    </tr>
  </table>
  <table>
    <tr class="row-1">
      <td>row 1, col 1</td>
      <td>row 1, col 2</td>
    </tr>
    <tr class="row-2">
      <td>row 2, col 1</td>
      <td>row 2, col 2</td>
    </tr>
  </table>
</div>

原CSS代码：

.tables {
  display: flex;
}

table {
  margin: 10px;
}

table, tr, td {
  border: 1px solid black;
}

tr[class^="row-"]:hover {
  background-color: red;
}

解决方案 #

可以实现，借助CSS的:has()伪类就能达成需求，无需JavaScript。

修改后的完整CSS代码：

.tables {
  display: flex;
}

table {
  margin: 10px;
}

table, tr, td {
  border: 1px solid black;
}

/* 核心逻辑：匹配容器内同class的悬停行，同步变色 */
.tables:has(tr.row-1:hover) tr.row-1,
.tables:has(tr.row-2:hover) tr.row-2 {
  background-color: red;
}

逻辑说明 #

• .tables:has(tr.row-1:hover) 会检测.tables容器内是否有row-1类的行被鼠标悬停
• 一旦检测到该状态，就给容器内所有row-1类的行设置红色背景
• 同理，row-2类的行遵循相同规则，不管悬停左边还是右边表格的某一行，两个表格里同class的行都会同步变色

兼容性提示 #

:has()伪类目前已被Chrome、Firefox（121版本及以上）、Safari等主流浏览器支持，若需兼容老旧浏览器可能需要其他方案，但现代浏览器环境下完全可用。

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