Change two rows background color on mouseover_问答_开发者

Change two rows background color on mouseover

开发者 https://www.devze.com 2023-02-09 00:35 出处：网络

I have quite a few rows of data in a table and I\'m trying to see if it\'s possible to highlight two rows at the same time on mouse over.

相关专题：css javascript

I have quite a few rows of data in a table and I'm trying to see if it's possible to highlight two rows at the same time on mouse over.

I can do something like

<tr onmous开发者_高级运维eover="this.style.backgroundColor='#aaaaaa';" onmouseout="this.style.backgroundColor='#bbbbbb';">

which works great for one row at a time but the data being shown is "paired" like below. Rows 1 and 2, 3 and 4. So I'm looking to see if I can highlight rows 1 and 2 at the same time when I mouse-over in either rows area. Then the same for 3 and 4.

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

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

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

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

Use <tbody> tags to group the pairs of rows together, along with a CSS :hover style to set the color.

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