使用鼠标变色(二)

2.实现当鼠标在某一表格行,该行变色,鼠标离开时恢复原色。(利用onmouseover和onmouseout事件)
<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <table class="table" style="border: 2px solid red;width: 500px;height: 300px;" onmouseover="overfun()"
        onmouseout="outfun()">
        <tbody class="tdata" <tr id="1row" onmouseover="this.backgroundColor('red')">
            <th scope="row">1</th>
            <td>@mdo</td>
            </tr>

            <tr id="2row">
                <th scope="row">2</th>
                <td>@fat</td>
            </tr>

            <tr id="3row">
                <th scope="row">3</th>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript">
        var tr = document.getElementsByTagName("tr");
        for (var i = 0; i < tr.length; i++) {
            tr[i].onmouseover = function(){
                for (var j = 0; j < tr.length; j++) {
                    tr[j].style.background = "#000";        //设置原来的背景色
                    tr[j].style.color = "#333";         //设置原来的字体颜色
                }
                this.style.background = "#4455";        //设置鼠标移动上去的背景色
                this.style.color = "#321";
            }
            tr[i].onmouseout = function(){
                this.style.background = "#000";        //设置原来的背景色
                this.style.color = "#333"; 
            }
        }

    </script>

</body>

</html>
发布了36 篇原创文章 · 获赞 50 · 访问量 9754

猜你喜欢

转载自blog.csdn.net/qq_41765969/article/details/103300977