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

Question

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

Sar*_*ara 0 html javascript css

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

我可以做点什么

<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

rmm*_*mmh 7

使用<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年前
查看次数：	4147 次
最近记录：	15 年前