为什么鼠标放在侧边主菜单上二级导航不出现，而且也不报错，是什么原因

首页课程实战体系课手记专栏慕课教程

来源：1-1 移动端屏幕适配介绍

qq_精慕门9254520

2019-12-26 13:03:25

<!DOCTYPE html>

<html>

<head>

<title>侧边栏菜单</title>

</head>

<body>

注册公司

</a>

</li>

财会服务

</a>

</li>

公司变更

</a>

</li>

公司注销

</a>

</li>

知识产权

</a>

</li>

资质代办

</a>

</li>

</ul>

<span class="ml10">注册有限公司</span>

</a>

</a>

<span class="ml10">注册香港公司</span>

</a>

<span class="ml10">注册个体户</span>

</a>

<span class="ml10">注册集团公司</span>

</a>

</div>

<span class="ml10">注册有限公司</span>

</a>

</a>

<span class="ml10">注册香港公司</span>

</a>

<span class="ml10">注册个体户</span>

</a>

<span class="ml10">注册集团公司</span>

</a>

</div>

<span class="ml10">注册有限公司</span>

</a>

</a>

<span class="ml10">注册香港公司</span>

</a>

<span class="ml10">注册个体户</span>

</a>

<span class="ml10">注册集团公司</span>

</a>

</div>

<span class="ml10">注册有限公司</span>

</a>

</a>

<span class="ml10">注册香港公司</span>

</a>

<span class="ml10">注册个体户</span>

</a>

<span class="ml10">注册集团公司</span>

</a>

</div>

<span class="ml10">注册有限公司</span>

</a>

</a>

<span class="ml10">注册香港公司</span>

</a>

<span class="ml10">注册个体户</span>

</a>

<span class="ml10">注册集团公司</span>

</a>

</div>

<span class="ml10">注册有限公司</span>

</a>

</a>

<span class="ml10">注册香港公司</span>

</a>

<span class="ml10">注册个体户</span>

</a>

<span class="ml10">注册集团公司</span>

</a>

</div>

<span class="ml10">注册有限公司</span>

</a>

</a>

<span class="ml10">注册香港公司</span>

</a>

<span class="ml10">注册个体户</span>

</a>

<span class="ml10">注册集团公司</span>

</a>

</div>

<span class="ml10">注册有限公司</span>

</a>

</a>

<span class="ml10">注册香港公司</span>

</a>

<span class="ml10">注册个体户</span>

</a>

<span class="ml10">注册集团公司</span>

</a>

</div>

<span class="ml10">注册有限公司</span>

</a>

</a>

<span class="ml10">注册香港公司</span>

</a>

<span class="ml10">注册个体户</span>

</a>

<span class="ml10">注册集团公司</span>

</a>

</div>

<span class="ml10">注册有限公司</span>

</a>

</a>

<span class="ml10">注册香港公司</span>

</a>

<span class="ml10">注册个体户</span>

</a>

<span class="ml10">注册集团公司</span>

</a>

</div>

<span class="ml10">注册有限公司</span>

</a>

</a>

<span class="ml10">注册香港公司</span>

</a>

<span class="ml10">注册个体户</span>

</a>

<span class="ml10">注册集团公司</span>

</a>

</div>

<span class="ml10">注册有限公司</span>

</a>

</a>

<span class="ml10">注册香港公司</span>

</a>

<span class="ml10">注册个体户</span>

</a>

<span class="ml10">注册集团公司</span>

</a>

</div>

</div>

</div>

</body>

</html>

// 获取全局变量

var index=0,/* 设置索引为0 */

timer = null,

prev = byId("prev"),/* 上一张 */

next = byId("next"),/* 下一张 */

pisc = byId("banner").getElementsByTagName("div"),/* 获取banner下面所有的div属性,就是所有banner图,是个数组 */

size = pisc.length,/* 获取banner图的总数 */

dots = byId("dots").getElementsByTagName("span");/* 获取圆点下面的span属性,也就是所有圆点,是个数组 */

// 封装document.getElementById()

function byId(id){

return typeof(id) === "string" ? document.getElementById(id) : id ;

}

// 封装DOM2级使用与任何浏览器.兼容性

function addHandler(element,type,handler){

if(element.addEventLisiten){

element.addEventLisiten(type,handler,true);

}else if(element.attachEven){

element.attachEven("on"+type,handler);

}else{

element["on"+type] = handler;

}

// 封装函数,点击轮播

function changeImg(){

for(var i=0; i<size; i++){

// 隐藏所有banner图

pisc[i].style.display = "none";

// 隐藏所有圆点的active属性

dots[i].className = "";

}

// 只显示当前的banner图

pisc[index].style.display = "block";

// 设置当前圆点的class属性

dots[index].className = "active";

}

// 鼠标点击下一张,播放下一张图片

addHandler(next,"click",function(){

index++;

if(index>=size) index=0;

changeImg();

})

// 点击上一张按钮,显示上一张图片

addHandler(prev,"click",function(){

index--;

if(index<0) index=size-1;

changeImg();

})

// 点击圆点,显示当前的banner图

for(var d=0; d<size; d++){

dots[d].setAttribute("data-id",d);

addHandler(dots[d],"click",function(){

index = this.getAttribute("data-id");

changeImg();

})

}

// 自动轮播

// 封装一个自动轮播

function startAutoPlay(){

timer = setInterval(function(){

index++;

if(index>=size) index=0;

changeImg();

},3000);

}

// 停止轮播

function stopAutoPlay(){

if(timer){

clearInterval(timer);

}

// 调用当鼠标放在banner上面的时候停止轮播

addHandler(banner,"mouseover",stopAutoPlay);

// 调用函数当鼠标离开banner的时候继续轮播

addHandler(banner,"mouseout",startAutoPlay);

// 调用函数自动轮播

startAutoPlay();

// 侧边栏

var ids=0,/* 侧边栏设置的索引 */

menuBox = byId("menu-box"),

mainMenu = byId("main-menu"),

subMenu = byId("sub-menu"),

menuItems = mainMenu.getElementsByClassName("li");

// 鼠标滑过主菜单

for( var m=0 ; m<menuItems.length; m++){

menuItems[m].setAttribute("data-index",x);

addHandler(menuItems[m],"mouseover",function(){

subMenu.className = "sub-menu";

ids = this.getAttribute("data-index");

})

}

@charset "utf-8";

.main{

width:100%;

background:#333333;

height:480px;

position: relative;

}

/* banner */

.banner{

width:100%;

height:480px;

overflow: hidden;

}

.banner-slide{

width:100%;

height:100%;

display: none;

}

.slide-active{

display: block;

}

.slide01{

background:url(../img/banner01.JPG) center no-repeat;

}

.slide02{

background:url(../img/banner003.JPG) center no-repeat;

}

.slide03{

background:url(../img/banner002.JPG) center no-repeat;

}

/* 左右按钮 */

.button{

width:40px;

height:80px;

cursor: pointer;

position:absolute;

top:50%;

margin-top:-40px;

left:0px;

background:url(../img/anniu.png) center no-repeat;

}

.next{

left:auto;

right:0px;

transform: rotate(180deg);

}

/* 圆点的定义 */

.dots{

position: absolute;

bottom:20px;

left:50%;

cursor: pointer;

}

.dots>span{

display: inline-block;

width:15px;

height:15px;

border:1px solid #fff;

border-radius: 50%;

margin-right:10px;

box-shadow: 0 0 0 2px rgba(255,255,255,0.3) inset;

}

.dots>span.active{

background:#fff;

}

/* 主菜单栏 */

.menu-box{

width:200px;

height:480px;

background:rgba(255,255,255,0.3);

position:absolute;

left:360px;

top:0px;

}

.main-menu{

width:200px;

height:480px;

position:absolute;

top:0px;

left:360px;

}

.main-menu-item{

height:79px;

line-height:80px;

border-bottom:1px solid #333333;

padding-left:20px;

}

.icon01{

background:url(../img/0001.png) 40px center no-repeat;

background-size:20px;

}

.icon02{

background:url(../img/0003.png) 40px center no-repeat;

background-size:20px;

}

.icon03{

background:url(../img/0004.png) 40px center no-repeat;

background-size:20px;

}

.icon04{

background:url(../img/02.png) 40px center no-repeat;

background-size:20px;

}

.icon05{

background:url(../img/05.png) 40px center no-repeat;

background-size:20px;

}

.icon06{

background:url(../img/04.png) 40px center no-repeat;

background-size:20px;

}

.main-menu-item:nth-child(6){

border-bottom:0px;

}

.main-menu-link{

display: inline-block;

width:100%;

color:#fff;

font-size:15px;

text-align:center;

}

/* 子菜单 */

.sub-menu{

width:750px;

height:480px;

background:#f5f5f5;

position:absolute;

top:0px;

left:560px;

z-index:500;

}

.hide{

display: none;

}

.inner-box{

width:750px;

height:480px;

display: none;

}

.sub-inner-box{

width:652px;

margin-left:40px;

overflow: hidden;

}

.title{

font-size:20px;

font-weight:bold;

color:#f00;

padding:20px 0px;

border-bottom: 1px solid #f00;

}

.sub-row {

font-size:16px;

padding-top:20px;

}

.sub-row:last-child{

padding-bottom: 20px;

}

.sub-row .bold{

font-weight:bold;

}

.sub-row .ml10{

margin-left:10px;

color:#333333;

}

写回答

1回答

好帮手慕慕子

2019-12-26

同学你好，针对你的问题解答如下：

因为获取主菜单项方式不对，无法给菜单项绑定鼠标移入事件，所以没有任何效果。
for循环中没有x变量，需要修改为m。

参考修改：

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0 学习 · 6815 问题

查看课程

相似问题

为什么我把引入css文件变成直接使用style标签写样式会出现黑点？

回答 3

回答 2

关于border 在dpr不同粗细不同的提问

回答 3

老师这个整个案例结束之后切换到ipad图片就裂开了是什么原因不是说可以自适应么等比例是不是图片也要设置

回答 2

感觉在简单适配中css像素已经可以跟着设备像素的改变而等比缩放了，为什么还要搞通用适配？

回答 2

打开慕课网App查看更多内容