admin管理员组

文章数量:1420095

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 onmouseover="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>

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 onmouseover="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>

  • javascript
  • html
  • css
Share Improve this question asked Feb 6, 2011 at 1:18 user559558user559558 0
Add a ment  | 

1 Answer 1

Reset to default 6

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>

本文标签： javascriptChange two rows background color on mouseoverStack Overflow

版权声明：本文标题：javascript - Change two rows background color on mouseover - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745325114a2653553.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。