                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /商城分类导航效果

js.。。。。。。。。。。。

js方法显示不出来啊

慕粉3182276

2016-04-13

源自：商城分类导航效果 3-1

关注问题我要回答

1166

操作

收起

2 回答

慕粉3182276 提问者
2016-04-13

没错啊。就是不显示，是不是火狐不兼容问题呢

0 回复有任何疑惑可以回复我~

收起回答

慕勒1174888
2016-04-13

CSS代码

.topmenu .lihover/*鼠标移动到上面时，应用的样式*/
{
    border: 1px solid #DDD;
    border-right: 0;
    box-shadow: 0 0 8px #DDD;
    -moz-box-shadow:0 0 8px #DDD;
    -webkit-box-shadow: 0 0 8px #DDD;
    background-image: none;
}
.topmenu .lihover .submenu/*悬浮层*/
{
    display: block;
}
.topmenu .lihover span/*白色小方框*/
{
    background: white;
    display: inline-block;
    z-index: 20;
    width: 18px;
    height: 30px;
    float: right;
    position: relative;
}

JS代码

window.onload = function () {
    var Lis = document.getElementsByTagName("li");
    for(var i = 0; i < Lis.length; i++) {
        Lis[i].onmouseover = function () {
            this.className = "lihover";
        }
        Lis[i].onmouseout = function () {
            this.className = "";
        }
        
    }
}

其中，Lis数组是所有li标签的集合，通过this.className来设置Lis的class样式为 .lihover ,同时，也实现了 .lihover 的所有子样式 .topmenu .lihover .submenu 和 .topmenu .lihover span。