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

- Sparafusile

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"的详细信息，以正确使用它们。

- Chris

---

这会突出显示所有行，而不仅仅是两行。 - user647772

一张表格中可以有多个tbody。如果每个tbody中恰好有两行的话，他的解决方案就可以奏效。请参考：https://dev59.com/_HA75IYBdhLWcg3w1sz2 - Sparafusile

Answer 2

如果你只想突出显示下一行，那么这实际上非常容易做到。

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

CSS中的+选择器仅选择紧随其后的元素，如果它与您的类型匹配。因此，在这种情况下，它会突出显示当前行以及下一行。

参见jsFiddle

当然，有一些限制，如果您想要同时选择两行，则不能使用"this row, and the previous"。在这种情况下，我可能会将两行嵌套在一个新表格中，放置在第一行内。明白了吗？

编辑：像这样：

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>

CSS

（这是一个关于CSS的段落标题，不需要进一步解释。）

tr:hover tr { background:#eee; }

工作的fiddle

- Nix

---

你能否在第一行使用+选择器来突出显示第二行，而在第二行使用-选择器来突出显示第一行？这基本上模仿了我现在使用JavaScript的操作。 - Sparafusile

很遗憾，CSS不能选择前一个元素，因此只能单向操作。但是您可以在tr内放置一个新的表格，并将其加亮。请参阅我的更新fiddle：http://jsfiddle.net/6TYBb/1/ - Nix

@Martin 不行。由于CSS的工作方式，您无法选择前一个或父元素。这可能看起来很傻，但从性能的角度来看，这是很有道理的。Johnathan Snook在此方面撰写了一篇优秀的文章：http://snook.ca/archives/html_and_css/css-parent-selectors/唯一明智的方法是进行嵌套，就像我在上面的Fiddle中所示。当您悬停在任何两行底部时，它们都会被突出显示，因为:hover目标定位在父元素本身上。希望这有意义。 - Nix

遗憾的是，这不允许分组，并且在 tr 内添加表格会破坏列的对齐。 - Mike A.

Answer 3

我不知道有什么方法可以让一个对象上的事件与另一个对象交互，使用纯CSS。通常，当您想要连接此类自定义事件时，您必须使用某种实际逻辑编程语言（在这种情况下是JavaScript）。

现在，如果您决定走这条路线，我可以帮您提供一些非常简单的jQuery代码，以完全满足您的需求 :). jQuery的事件绑定模型实际上消除了很多JavaScript的痛苦。

- Sheridan Bulger

---

谢谢你的回答。我其实喜欢 JavaScript 带来的挑战，但如果我改变了想法，我会发起一个新的问题。 - Sparafusile