Question

我在表格中有很多行数据，我试图看看鼠标悬停时是否可以同时突出显示两行。

我可以做类似

的事情

<tr onmouseover="this.style.backgroundColor='#aaaaaa';" onmouseout="this.style.backgroundColor='#bbbbbb';">

一次适用于一行，但显示的数据是“配对”，如下所示。第1行，第2行，第3行和第4行。所以我想看看是否可以在任一行区域中鼠标悬停时同时突出显示第1行和第2行。然后是3和4相同。

<tr><td>Row1</td></tr>
<tr><td>Row2</td></tr>

<tr><td>Row3</td></tr>
<tr><td>Row4</td></tr>

Answer 1

使用<tbody>标记将行对组合在一起，并使用CSS :hover样式设置颜色。

<html>
    <style>
        .foo:hover { background-color: #aaaaaa; }
    </style>
    <body>
        <table>
            <tbody class="foo">
                <tr><td>Row1</td></tr>
                <tr><td>Row2</td></tr>
            </tbody>
            <tbody class="foo">
                <tr><td>Row3</td></tr>
                <tr><td>Row4</td></tr>
            </tbody>
        </table>
    </body>
</html>

鼠标悬停时更改两行背景颜色

1 个答案: