css - 使用 CSS 在悬停时突出显示两个表格行

Question

使用 CSS 在鼠标悬停时更改表格中一行的背景颜色非常简单:

.HighlightableRow:hover
{
  background-color: lightgray;
}

还有一些 HTML:

<table>
  <tr class=HighlightableRow>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  <tr>
  <tr class=HighlightableRow>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  <tr>
</table>

有时，当我将鼠标悬停在其中任何一行上时，我想突出显示一对行。例如，当在表格中显示工作订单列表时，我会在第一行显示创建者、创建日期、紧急程度等，第二行会显示请求的工作除外。

除了使用 JavaScript onmouseover/onmouseout 事件处理程序之外，还有其他方法可以创建如上所示的效果吗？最好使用 CSS。

Answer 1

使用 tbody 元素对行进行分组。

tbody:hover { background:#eee;}

HTML:

<table>
  <tbody>
    <tr>
      <td>Hello</td>
      <td>World!</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World!</td>
    </tr>
  </tbody>
</table>

查看有关“tbody”、“thead”和“tfoot”的详细信息以了解正确用法。