我試圖用CSS偽選擇器讓兩個(gè)不同的表能夠互相監(jiān)聽，我創(chuàng)建了一個(gè)數(shù)據(jù)表和一個(gè)自動(dòng)編號(hào)的表，這是不同于數(shù)據(jù)表的表。我試圖實(shí)現(xiàn)當(dāng)用戶懸停在數(shù)據(jù)表的td上時(shí)，整行連同相應(yīng)的自動(dòng)編號(hào)行一起突出顯示，同樣當(dāng)用戶懸停在自動(dòng)編號(hào)行的td上時(shí)，數(shù)據(jù)表的tr也隨之突出顯示。

我嘗試了一些方法，比如使用useState，但是我的目標(biāo)是純CSS解決方案。如果有人有好的見(jiàn)解，請(qǐng)分享。

此外，如果這不能用純css實(shí)現(xiàn)，我們可以使用事件處理程序與偽選擇器，這也將是有益的。請(qǐng)分享你的想法。

密碼筆

.sticky-table tbody tr:hover td,
.auto-number-table tbody tr:hover td {
  background-color: #e0e0e0;
}

你可以使用:has()偽類，但是它需要大量的CSS，并且在firefox中不受支持。下面是標(biāo)記的例子。最后一個(gè)css規(guī)則選擇任何具有特定數(shù)據(jù)表屬性的元素，它突出顯示任何具有相同屬性值的表行。

table {
  border-collapse:collapse;
  margin-bottom: 1rem;
}

td {
  border: 1px solid lightgray;
  padding-inline: 0.25rem;
}

:has([data-row='1']:hover) [data-row='1'],
:has([data-row='2']:hover) [data-row='2'],
:has([data-row='3']:hover) [data-row='3'] {
  background-color:red;
}

Data table
<table>
  <tr data-row='1'>
    <td>Row</td>
    <td>1</td>
  </tr>
  <tr data-row='2'>
    <td>Row</td>
    <td>2</td>
  </tr>
  <tr data-row='3'>
    <td>Row</td>
    <td>3</td>
  </tr>
</table>

Autonumber table
<table>
  <tr data-row='1'>
    <td>Auto Row</td>
    <td>1</td>
  </tr>
  <tr data-row='2'>
    <td>Auto Row</td>
    <td>2</td>
  </tr>
  <tr data-row='3'>
    <td>Auto Row</td>
    <td>3</td>
  </tr>
</table>