html - 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 以实现此目的:

Introducing the tbody element !

tbody 元素可以与 thead 和 tfoot 结合使用，例如在将表格的页眉和页脚锁定到位的同时启用滚动。此外，打印时，如果表格跨越多页，则页眉和页脚可能会在下一页重复出现。检查this question了解更多详情。

很多人不知道的是，您可以在一个表格中包含多个 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>

P.s.:当您这样做时，为了保持一致性，您可能还想将表格标题嵌套在 thead 元素中。