0

假设我们有一个 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，以便在后一种情况下两行都将突出显示？

4

0 回答 0