简单的鼠标经过效果

<!DOCTYPE html>
        <html>
        <head>
          <meta charset="utf-8">
          <title>JS Bin</title>
          <style>
             .box{
                width: 300px;
                background: yellow;
                padding: 0;
             }
             ul>li{
                list-style: none;
                padding: 10px;
                margin: 5px;
                background: pink;
             }
             ul>li.hover{
                background: blue;
             }
          </style>
        </head>
                <body>
                    <ul class="box">
                        <li>111</li>
                        <li>222</li>
                        <li>333</li>
                    </ul>
                      <script>
                       var Obox=document.querySelector(".box");
                       Obox.addEventListener("mouseover",function(e){
                        for (var i=0;i<this.children.length;i++) {
                            this.children[i].classList.remove("hover");
                        }
                         e.target.classList.add("hover");
                       });
                      </script>
                </body>
        </html>

效果

优化代码
图片.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容