这是桌子的样子:

table {
  border-collapse: collapse;
}

<table border="1">
  <tr>
    <td rowspan="2">Text here</td>
    <td>The row 1 text goes here</td>
  </tr>
  <tr>
    <td>The row 2 text goes here</td>
  </tr>
  <tr>
    <td rowspan="2">Text here</td>
    <td>The row 1 text goes here</td>
  </tr>
  <tr>
    <td>The row 2 text goes here</td>
  </tr>
  <tr>
    <td rowspan="2">Text here</td>
    <td>The row 1 text goes here</td>
  </tr>
  <tr>
    <td>The row 2 text goes here</td>
  </tr>
</table>

我要实现的是,当用户悬停在其中一行上时,另一个相邻行和用户悬停的行都将亮显。我试过这个:
table {
  border-collapse: collapse;
}

table tr:nth-child(odd):hover {
  background: #CCC;
}

table tr:nth-child(odd):hover + tr {
  background: #CCC;
}

table tr:nth-child(even):hover {
  background: #CCC;
}

<table border="1">
  <tr>
    <td rowspan="2">Text here</td>
    <td>The row 1 text goes here</td>
  </tr>
  <tr>
    <td>The row 2 text goes here</td>
  </tr>
  <tr>
    <td rowspan="2">Text here</td>
    <td>The row 1 text goes here</td>
  </tr>
  <tr>
    <td>The row 2 text goes here</td>
  </tr>
  <tr>
    <td rowspan="2">Text here</td>
    <td>The row 1 text goes here</td>
  </tr>
  <tr>
    <td>The row 2 text goes here</td>
  </tr>
</table>

这几乎可以工作,但是当您将鼠标悬停在一行上,该行显示“row 2 text goes here”,只有该行被突出显示。这个问题是否只有html/css解决方案?
我想的是类似于<rowgroup>的东西。

最佳答案

tbody标记是一个组,您可以使用它:

table {
  border-collapse: collapse;
}

tbody:hover {
  background: #CCC;
}

<table border="1">
  <tbody>
    <tr>
      <td rowspan="2">Text here</td>
      <td>The row 1 text goes here</td>
    </tr>
    <tr>
      <td>The row 2 text goes here</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="2">Text here</td>
      <td>The row 1 text goes here</td>
    </tr>
    <tr>
      <td>The row 2 text goes here</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="2">Text here</td>
      <td>The row 1 text goes here</td>
    </tr>
    <tr>
      <td>The row 2 text goes here</td>
    </tr>
  </tbody>
</table>

07-24 09:43
查看更多