用Javascript实现鼠标经过某一行，那一行变色

最新推荐文章于 2024-06-20 19:52:08 发布

茂茂睡不醒

最新推荐文章于 2024-06-20 19:52:08 发布

阅读量2.2k

点赞数 3

分类专栏： JS 文章标签： javascript css html html5

本文链接：https://blog.csdn.net/weixin_44029226/article/details/113448735

版权

JS 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

用Javascript实现鼠标经过某一行，那一行变色

正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教

我们在浏览网页时，经常会遇见这种情况，就是有多行显示时，你的鼠标经过这些行，便会使这些行变成其他的颜色，离开了又变回原来的颜色，用来区分你现在鼠标所停留的是哪行。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        thead tr{
            height: 30px;
            background-color: skyblue;
        }
        tbody tr{
            height: 30px;
        }
        tbody td{
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        .bg{
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金惠3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003527</td>
                <td>啊实打实</td>
                <td>646</td>
                <td>324135</td>
                <td>654</td>
                <td>+0.030%</td>
            </tr>
            <tr>
                <td>003528</td>
                <td>啊实打实的</td>
                <td>56465</td>
                <td>653456</td>
                <td>6465</td>
                <td>+0.062%</td>
            </tr>
        </tbody>
    </table>
    <script>
        var trs=document.querySelector('tbody').querySelectorAll('tr')
        for (var i=0;i<trs.length;i++){
            trs[i].onmouseover=function () {
                this.className='bg'
            }
            trs[i].onmouseout=function () {
                this.className=''
            }
        }
    </script>
</body>
</html>

演示效果
未停留时：

在这里插入图片描述

停留某一行时：

在这里插入图片描述

代码解释：

这里用到的就是onmouseover和onmouseout两个事件，当鼠标停留在第i行时时，触发onmouseover，使得这一行的classname变为我们规定的，在style里面已经设置好了样式。然后如果鼠标离开这一行触发onmouseout，使得classname变为空“”，使得这一行没有所对应的classname，就不修改，恢复到最开始的默认的设置。

别喷我，写的不好就劳烦指点一二，觉得有帮助就留下个大拇指点个关注再走哈哈哈！