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

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

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;
        }
        
    }