使用CSS高亮显示悬停时的两个表格行

使用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>

第1单元
第2单元
第三单元
第1单元
第2单元
第三单元

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

---

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

我不知道有什么方法可以使一个对象上的事件与普通CSS中的另一个对象交互。一般来说，当您想要连接这些定制事件时，您将无法使用某种实际的逻辑编程语言（在本例中为javascript）

---

现在，如果您决定走这条路，我可以用一些非常简单的jQuery来帮助您完成所需的工作：）。jQuery的事件绑定模型实际上从javascript中省去了很多麻烦。

如果您满足于突出显示下一行，这实际上非常简单

tr:hover, tr:hover + tr {
background:#eee; }

css

+

选择器仅选择紧跟其后的元素（如果它与您的类型匹配）。因此，在本例中，它高亮显示当前行和下一行

看

当然，如果您想将第二组分组，则会有一些限制，因为您无法执行“此行和上一行”。在这种情况下，我可能会将这两行嵌套在新表的第一行中。有道理吗

编辑：类似这样的

HTML

<table>
     <tr>
       <td>

         <table>

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

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

         </table>

       </td>
     </tr>
   </table>

---

工作

使用tbody元素对行进行分组

tbody:hover { background:#eee;}

HTML:

你好
世界！
你好
世界！

---

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

谢谢你的回答。实际上我喜欢JavaScript的痛苦，但是如果我改变我的观点，我会开始一个新问题。你能用第一行的+选择器突出显示第二行，用第二行的-突出显示第一行吗？这很像我现在用JavaScript所做的。遗憾的是，没有。它只有一种方式，因为CSS无法选择前面的元素。但您可以在tr中放置一个新表，并突出显示该表。看看我更新的提琴：@martinno。由于CSS的工作方式，您不能选择上一个元素或父元素。这可能看起来很傻，但从性能角度来看，这很有意义。Johnathan Snook就此写了一篇优秀的文章：不使用JavaScript暴力的唯一明智方法是嵌套，正如我在上面的提琴中所说明的那样。当您将鼠标悬停在底部两行中的任何一行时，它们都会高亮显示，因为

：hover

目标位于父元素本身上。我希望这是有意义的。遗憾的是，这不允许分组，并且在tr中添加一个表会使列失去对齐。这会突出显示所有行，而不仅仅是两行。一个表中可以有多个tbody。如果每个tbody中正好有两行，则他的解决方案将有效。见：

tbody:hover { background:#eee;}

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