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/

ユーザーが 2 行構成の最初の行にマウス カーソルを置くと、両方の「内側」の行が強調表示されます。しかし、2 番目の行にカーソルを置くと、2 番目の行だけが強調表示されます (説明が十分に明確でない場合は、例を確認してください)。

後者の場合に両方の行が強調表示されるように CSS を変更する方法はありますか?

4

0 に答える 0