Question

假设我们有一个HTML和CSS：

<html>
    <head>
        <style type="text/css">
            table tr:hover td {
                background-color: #aaaaaa;
            }

            table tr:hover + tr td[colspan] {
                background-color: #aaaaaa;          
            }
        </style>
    </head>
    <body>
        <table style="width: 100%" border=1>
            <tr>
              <td rowspan="2">One</td>
              <td>Two</td>
              <td>Three</td>
            </tr>
            <tr>
              <td colspan="2">Four</td>
            </tr>

            <tr>
              <td rowspan="2">One</td>
              <td>Two</td>
              <td>Three</td>
            </tr>
            <tr>
              <td colspan="2">Four</td>
            </tr>
        </table>        
    </body>
</html>

预览：http://jsfiddle.net/YEXjq/

如果用户将鼠标光标放在双行配置的第一行上，则两个“内部”行都会突出显示。但如果他将光标放在第二行，则只突出显示第二行（如果描述不够清楚，请检查示例）。

有没有办法修改CSS，以便在后一种情况下两行都会突出显示？

突出显示表中的两行

0 个答案: