隔行变色

最新推荐文章于 2022-02-16 17:09:43 发布

原创最新推荐文章于 2022-02-16 17:09:43 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

前端js 专栏收录该内容

10 篇文章

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           div{
               width: 500px;
               height: 600px;

           }
           ul{
               list-style: none;
           }
           li:nth-child(2n){
               width: 250px;
               height: 30px;
               background: pink;
               margin: 6px;
               text-align: center;
           }
           li:nth-child(2n+1){
               width: 250px;
               height: 30px;
               background: green;
               margin: 6px;
               text-align: center;
           }
       </style>
   </head>
   <body>
       <div>
           <ul>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
           </ul>
       </div>
   </body>
   <script>
       var oli = document.getElementsByTagName('li');
       for (var i=0;i<10;i++) {
           oli[i].onmouseover = function(){
               this.style.backgroundColor = 'yellow';
           }
           oli[i].onmouseout = function(){
               this.style.backgroundColor = '';
           }
       }

   </script>
</html>