CSS 如何在悬停时将表格中的两行突出显示为一行？

Question

我的问题是，我想突出显示我当前悬停的行下方的表格行。

然而，我面临的问题是，在两行之后，它应该突出显示接下来的两行。基本上，表格的每两行突出显示为一行。

因此，如果第 2 行和第 3 行被突出显示，当我将鼠标悬停在第 4 行上时，只有第 4 行和第 5 行被突出显示，第 6 行和第 7 行等等。

目前，悬停时，它仅突出显示鼠标所在的行。使用 CSS 可以实现这样的功能吗？或者我只是忽略了一些明显的事情。

table tr:nth-child(4n+4) {
  background-color: #EBEBEB;
}
#table tr:nth-child(4n+5) {
  background-color: #EBEBEB;
}
#table tr:hover {
  background: #3498DB;
}

在这里查看我的工作： http: //jsfiddle.net/g5o7v6qe/21/

抱歉，如果我的问题有点令人困惑或措辞困难，我确实对 HTML 和 CSS 有一定的了解，但这出于某种原因困扰了我。谢谢。

Answer 1

遗憾的是，仅使用 CSS 无法实现您正在搜索的解决方案，因为 CSS 不提供用于选择前面子级的选择器（当将鼠标悬停在描述上时，您还需要突出显示上面的行）。相反，您可以稍微修改一下 HTML 来实现这一点：

元素介绍tbody！

该元素可以与tbody结合使用，例如在将表格的页眉和页脚锁定到位的同时启用滚动。此外，打印时，如果表格跨越多个页面，页眉和页脚可能会在下一页上重复。检查此问题以获取更多详细信息。theadtfoot

很多人不知道的是，tbody一个表中可以有多个元素。这意味着您可以将表中的每组行包装在一个tbody元素中，然后适当地设置每个行的样式：

#table {
  border-radius: 10px;
  border-collapse: collapse;
  width: auto;
}

#table td,
#table th {
  border: 1px solid #DDDDDD;
  padding: 8px;
}

#table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #333333;
  color: white;
}

#table tbody:nth-child(2n+3) {
  background-color: #EBEBEB;
}

/* Group highlights */
#table tbody:hover {
  background: #3498D8;
}

<table align="center" id="table">
  <thead>
    <tr>
      <th>Vendor</th>
      <th>Model</th>
      <th>Year</th>
      <th>Source</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>vendor1</td>
      <td>model1</td>
      <td>year1</td>
      <td>source1</td>
    </tr>
    
    <tr>
      <td colspan="4">description1</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>vendor2</td>
      <td>model2</td>
      <td>year2</td>
      <td>source2</td>
    </tr>
    
    <tr>
      <td colspan="4">description2</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>vendor3</td>
      <td>model3</td>
      <td>year3</td>
      <td>source3</td>
    </tr>
    
    <tr>
      <td colspan="4">description3</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>vendor4</td>
      <td>model4</td>
      <td>year4</td>
      <td>source4</td>
    </tr>
    
    <tr>
      <td colspan="4">description4</td>
    </tr>
  </tbody>
</table>

Ps：当您这样做时，您可能还希望将表头嵌套在一个thead元素中以保持一致性。