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

工作fiddle

Answer 3

我不知道如何让一个对象上的事件与vanilla CSS中的另一个对象进行交互。通常，当您想要连接这些自定义事件时，您会使用某种实际的逻辑编程语言（在本例中为javascript）。

现在，如果您决定采用这种方式，我可以帮助您使用一些非常简单的jQuery来完成您所需的操作:)。 jQuery的事件绑定模型实际上带来了很多javascript的痛苦。

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

3 个答案: