表悬停问题

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{

}