2 qq 27678531 qq_27678531 于 2015.06.11 11:27 提问

如何让li鼠标移入时背景色变成相对应子节点的颜色
li
  <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]没定义

2个回答

showbo
showbo   Ds   Rxr 2015.06.11 11:48
已采纳

闭包没做好,你的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>
showbo
showbo 回复qq_27678531: 你是触发了事件才存储没有意义啊。。要放到for语句体里面,不要放mouseover事件里面
2 年多之前 回复
qq_27678531
qq_27678531 谢谢;搞定了。不过还有两个不明白,1.之前的index无法用是因为两个的length不等的原因吗?2.aMli[i].i为什么可以确定索引值
2 年多之前 回复
qq_27678531
qq_27678531   2015.06.11 15:23

谢谢;搞定了。不过还有两个不明白,1.之前的index无法用是因为两个的length不等的原因吗?2.aMli[i].i为什么可以确定索引值

Csdn user default icon
上传中...
上传图片
插入图片