简单隔行变色之鼠标移入移出

如期而至°

于 2019-07-21 15:51:50 发布

阅读量155

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/qq_45435600/article/details/96728167

Web前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的简单隔行变色效果，并增加了鼠标悬停时改变背景色的功能。通过简单的代码示例，展示了如何为列表项设置交替颜色并响应鼠标事件。

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

简单隔行变色之鼠标移入移出

HTML：

<ul id="newsBox">
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
    </ul>

CSS:

 *{margin: 0;padding: 0;}
    ul{list-style: none;}
    #newsBox{
        box-sizing: border-box;
        width: 300px;
        padding: 20px;
        border: 2px solid lightblue;
        margin: 20px auto;
    }
    #newsBox li{
        line-height: 35px;
        border-bottom: 1px dashed lightcoral;
    }
    #newsBox li:nth-last-child(1){
        border-bottom: none;
    }

JS:

    let newsBox=document.getElementById('newsBox');
    let newsList=newsBox.getElementsByTagName('li');//类数组
    for(let i=0;i<newsList.length;i++){    
        let curLi=newsList[i];
        curLi.style.background=i%2===0?'#fff':'#ddd';
        curLi.onmouseover=function(){
           //自定义一个属性来暂时存储原来的值
           this.index= curLi.style.background;
           curLi.style.background='lightblue';
        }
        curLi.onmouseout=function(){
            curLi.style.background=this.index;
        }
        
    }