javascript - 表格悬停问题

Question

+----+----+----+-----+  
|    |    | c3 | c4  |  
|    | c2 +----+-----+  
|    |    | c5 | c6  |  
| c1 +----+----+-----+  
|    |    | c8 | c9  |  
|    | c7 +----+-----+
|    |    | c10| c11 |  
+----+----+----------+ 
+----+----+----+-----+  
|    |    | 3 | 4    |  
|    | 2  +----+-----+  
|    |    | 5 | 6    |  
| 1  +----+----+-----+  
|    |    | 8  |  9  |  
|    | 7  +----+-----+
|    |    | 10 |   11|  
+----+----+----------+    

上表有两行，我想使用悬停突出显示从 C1 到 C11 的行，而不是悬停 1 到 11（即：如果我悬停到第一行（C1 到 C11），则不应突出显示第二行，如果我悬停第二行（1到11）第一行不应突出显示）

Answer 1

使用此代码：

jsFiddle

HTML：

<table>
    <tr>
        <td rowspan="4">c1</td>
        <td rowspan="2">c2</td>
        <td>c3</td>
        <td>c4</td>
    </tr>
    <tr>
        <td>c5</td>
        <td>c6</td>
    </tr>
    <tr>
        <td rowspan="2">c3</td>
        <td>c7</td>
        <td>c8</td>
    </tr>
    <tr>
        <td>c9</td>
        <td>c10</td>
    </tr>
</table>

CSS：

td{
    padding:5px;
    border:1px solid #aaa;
}

tr:hover td{
    background:red;
}

Answer 2

假设 c4 是第一个 tr 的第四个 td，你可以这样做

tr:first-of-type td:nth-of-type(4):hover{

}

假设 c1 是第一个 tr 的第一个 td，您可以使用

tr:first-of-type td:first-of-type:hover{

}

如果我的上述两个假设都是正确的，并且您想为两者设置相同的 css，您也可以将其组合成，

tr:first-of-type td:nth-of-type(4):hover, tr:first-of-type td:first-of-type:hover{

}