javascript - 突出显示 HTML 表格中的行(悬停在行和前面的行上)

Question

假设一个示例表:

<table>
   <tr>
     <th>Head 1</th>
     <th>Head 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
    <tr>
      <td>Data 7</td>
      <td>Data 8</td>
    </tr>
</table>

我正在寻找突出显示 <= n 行的最佳技术，其中 n 是悬停在行上的行(不包括标题行)。例如，如果鼠标悬停

<tr>
  <td>Data 5</td>
  <td>Data 6</td>
</tr>

表格的以下部分应突出显示:

<tr>
  <td>Data 1</td>
  <td>Data 2</td>
</tr>
<tr>
  <td>Data 3</td>
  <td>Data 4</td>
</tr>
<tr>
  <td>Data 5</td>
  <td>Data 6</td>
</tr>

知道如何实现这种效果吗？

Answer 1

基本上，您可以相反的方式看到事物:悬停在 tr 之后的任何 tr 都应该没有背景: 测试这个:

table:hover tr {
  background:gray;
}
table:hover tr:hover ~tr {
  background:none;
}

DEMO

---

=============== 根据评论中的请求编辑 ================

React only on last element in row .

注意:此选项不允许点击单元格，而是点击每行的最后一个单元格。

---

table {
  pointer-events:none;
}
table tr :last-child {
  pointer-events:auto;
  cursor: pointer;
}