个人js学习实例-鼠标经过隔行变色

最新推荐文章于 2020-11-17 15:18:59 发布

刘吉祥

最新推荐文章于 2020-11-17 15:18:59 发布

阅读量237

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/luckybuling/article/details/81637263

版权

Javascript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色</title>
    <!--引用bootstrap-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <style>
        li{
            padding:10px 0;
        }
        .hover{
            background-color: #cccccc!important;
        }
    </style>
    <script>
        window.onload = function () {
            //获取ul里的所有li赋给数组lis
            var lis = document.getElementsByTagName("li");
            for(var i = 0; i <= lis.length; i++ ){
                //偶数被2整除
                if(i%2 == 0)
                {
//                    将是偶数的li背景设魏#eeee
                    lis[i].style.backgroundColor = "#eee"
                }
                //鼠标经过li,当前底色变量
                lis[i].onmouseover = function () {
                    //this指的是时间的调用者
                    this.className = "hover"
                }
                lis[i].onmouseout = function () {
                    //this指的是时间的调用者
                    this.className = ""
                }
            }
        }
    </script>
</head>
<body>
<div class="container-fluid text-center" style="margin-top: 50px">
    <ul class="list-unstyled">
        <li>书声雨声读书声，声声入耳</li>
        <li>书声雨声读书声，声声入耳</li>
        <li>书声雨声读书声，声声入耳</li>
        <li>书声雨声读书声，声声入耳</li>
        <li>书声雨声读书声，声声入耳</li>
    </ul>
</div>

</body>
</html>

刘吉祥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人js学习实例-鼠标经过隔行变色

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;隔行变色&lt;/title&gt; &lt;!--引用bootstrap--&gt; &lt;link rel=&q
复制链接

扫一扫