仅使用 CSS 将具有相同类的行悬停在 HTML 表中答案

【问题标题】：Hovering rows with the same class in HTML table with CSS only仅使用 CSS 将具有相同类的行悬停在 HTML 表中
【发布时间】：2022-11-30 07:18:15
【问题描述】：

我有 2 个具有相同行类名称的 HTML 表：

.tables {
  display: flex;
}

table {
  margin: 10px;
}

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

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

<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（无 JavaScript）？

【问题讨论】：

标签： html css html-table hover

【解决方案1】：

您可以使用 Chrome 和 Edge 现在支持的 :has()，大概其他浏览器也支持：

.tables {
  display: flex;
}

table {
  margin: 10px;
}

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

div.tables:has(tr.row-1:hover) tr.row-1,
div.tables:has(tr.row-2:hover) tr.row-2 {
  background-color: red;
}

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

【讨论】：