隔2行变色扩展?

最新推荐文章于 2022-09-08 09:54:34 发布

转载最新推荐文章于 2022-09-08 09:54:34 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c32b03e51882525a7241bc7

本文展示了一个使用HTML创建列表并运用JavaScript实现列表项点击与鼠标悬停效果的实例。通过CSS美化列表样式，JavaScript为每个列表项添加了点击警报和鼠标悬停背景变化的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
         ul{
             list-style: none;
             border: 1px solid red;
             width: 600px;
             margin: 20px auto;
         }
         ul li{
            
             font-size: 15px；
         }
         .bg0{
              background: red;
         }
         .bg1{
              background: goldenrod;
         }
         .hover{
              background: green;
         }
    </style>
</head>
<body>
    <ul id="list">
        <li>腾讯视频-中国领先的在线视频媒体平台,海量高清视频  1</li>
        <li>腾讯视频-中国领先的在线视频媒体平台,海量高清视频  2</li>
        <li>腾讯视频-中国领先的在线视频媒体平台,海量高清视频  3</li>
        <li>腾讯视频-中国领先的在线视频媒体平台,海量高清视频  4</li>
        <li>腾讯视频-中国领先的在线视频媒体平台,海量高清视频  5</li>
        <li>腾讯视频-中国领先的在线视频媒体平台,海量高清视频  6</li>
        <li>腾讯视频-中国领先的在线视频媒体平台,海量高清视频  7</li>
        <li>腾讯视频-中国领先的在线视频媒体平台,海量高清视频  8</li>
        <li>腾讯视频-中国领先的在线视频媒体平台,海量高清视频  9</li>
        <li>腾讯视频-中国领先的在线视频媒体平台,海量高清视频  10</li>
    </ul>
    <script>
        var oUl=document.getElementById('list');
        var oLis=document.getElementsByTagName('li');
        for(var i=0;i<oLis.length;i++){
           //console.log(i) 0 1 2 3 4 5 6 7 8 9
           oLis[i]._index=i;
           oLis[i].className='bg'+(i%2);
            
           oLis[i].onclick=function(){
               alert(this._index);//点哪个li的话 就会弹出对应li的索引
           }

           oLis[i].onmouseover=function(){
               //alert(this._index+1);
               this.className='hover';
           }
           oLis[i].onmouseout=function(){
              
               this.className='bg'+(this._index%2);
           }

        }
    </script>
</body>
</html>
复制代码