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

有时，当我将鼠标悬停在某一行上时，我希望突出显示这两行。例如，在表格中显示工作单列表时，我将有一行包含创建者、创建日期、紧急程度等，第二行包含所请求工时的except。

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

Answer 1

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

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; }

工作fiddle

Answer 2

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

我不知道有什么方法可以使一个对象上的事件与普通CSS中的另一个对象交互。通常，当您想要连接这样的自定义事件时，您需要使用某种实际的逻辑编程语言(在本例中为javascript)。

现在，如果您决定走这条路，我可以用一些非常简单的jQuery帮助您做您需要的事情:)。jQuery的事件绑定模型实际上大大减轻了javascript的负担。