使用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"的详细信息以了解正确的用法.

Answer 2

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

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

+如果匹配您的类型,则css 选择器仅选择立即跟随的元素.所以在这种情况下,它会突出显示当前行以及下一行.

见jsFiddle

当然,有一些限制,如果你想要分组两个,因为你不能做"这一行和前一个".在这种情况下,我可能会将这两行嵌套在第一行内的新表中.合理？

编辑:这样的事情

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

tr:hover tr { background:#eee; }

工作小提琴