如何让li鼠标移入时背景色变成相对应子节点的颜色

Question

  <div class="main" id="omain">
        <ul>
            <li style="background:#ba2452"><img src="image/main_img1.png"/><span style="background:#7c1837">订单管理</span><a>×</a></li>
            <li style="background:#743dc0"><img src="image/main_img2.png"/><span style="background:#4d2980">人资管理</span><a>×</a></li>
            <li style="background:#e1551a"><img src="image/main_img3.png"/><span style="background:#963911">财务管理</span><a>×</a></li>
            <li style="background:#25a1ad"><img src="image/main_img4.png"/><span style="background:#196c73">商机线索</span><a>×</a></li>
            <li style="background:#21af1f"><img src="image/main_img5.png"/><span style="background:#167514">客服业务</span><a>×</a></li>
            <li style="background:#3d80f5"><img src="image/main_img6.png"/><span style="background:#2956a3">工单管理</span><a>×</a></li>
            <li style="background:#25a1ad"><img src="image/main_img7.png"/><span style="background:#196c73">竞网应用</span><a>×</a></li>
            <li style="background:#595959 url(image/main_img8.png) no-repeat center"></li>
        </ul>
    </div>

 window.onload=function(){
    var oMain=document.getElementById('omain');
    var aMli=oMain.getElementsByTagName('li');

    var aA=oMain.getElementsByTagName('a');


    for(i=0;i<aMli.length-1;i++){
        aSpan=aMli[i].getElementsByTagName('span');
        aMli[i].onmouseover=function(){
            this.index=i;
            this.style.background=aSpan[i].style.background;
            aA[i].style.display='block';

        }
    }


}

为何下面的JS没有没有效果，提示aSpan[i]没定义

Answer 1

闭包没做好，你的i为最后aMli.length-1这个值，就是最后一个li没有span当然错了，而且你也要还原吧，需要添加mouseout事件

  <div class="main" id="omain">
        <ul>
            <li style="background:#ba2452"><img src="image/main_img1.png"/><span style="background:#7c1837">订单管理</span><a>×</a></li>
            <li style="background:#743dc0"><img src="image/main_img2.png"/><span style="background:#4d2980">人资管理</span><a>×</a></li>
            <li style="background:#e1551a"><img src="image/main_img3.png"/><span style="background:#963911">财务管理</span><a>×</a></li>
            <li style="background:#25a1ad"><img src="image/main_img4.png"/><span style="background:#196c73">商机线索</span><a>×</a></li>
            <li style="background:#21af1f"><img src="image/main_img5.png"/><span style="background:#167514">客服业务</span><a>×</a></li>
            <li style="background:#3d80f5"><img src="image/main_img6.png"/><span style="background:#2956a3">工单管理</span><a>×</a></li>
            <li style="background:#25a1ad"><img src="image/main_img7.png"/><span style="background:#196c73">竞网应用</span><a>×</a></li>
            <li style="background:#595959 url(image/main_img8.png) no-repeat center"></li>
        </ul>
    </div>
<script>
    window.onload = function () {
        var oMain = document.getElementById('omain');
        var aMli = oMain.getElementsByTagName('li');

        var aA = oMain.getElementsByTagName('a');


        for (i = 0; i < aMli.length - 1; i++) {
            aMli[i].i = i;
            aMli[i].old = aMli[i].style.background;
            aMli[i].onmouseover = function () {
                console.log(this.i);
                this.style.background = this.getElementsByTagName('span')[0].style.background;
                aA[this.i].style.display = 'block';

            }
            aMli[i].onmouseout = function () {//还原
                this.style.background = this.old;
                aA[this.i].style.display = 'inline';
            }
        }

    }
</script>