老师，主菜单的背景色怎么消失？当滑出主菜单时，背景色没有消失

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

来源：5-4 二级菜单的展开与收起

Leeluo

2019-04-21 20:45:05

margin:0;

padding:0;

}

ul{

list-style:none;

}

a:link,a:visited{

text-decoration:none;

color:#333;

}

body{

font-family:"微软雅黑";

color:#14191e;

}

.main{

width: 1200px;

height:460px;

margin:30px auto;

overflow:hidden;

position:relative;

}

.banner{

width:1200px;

height:460px;

overflow:hidden;

position:relative;

}

.banner-slider{

width:1200px;

height:460px;

background-repeat:no-repeat;

position:absolute;

display:none;

}

.slide1{

background-image:url("../img/bg1.jpg");

}

.slide2{

background-image:url("../img/bg2.jpg");

}

.slide3{

background-image:url("../img/bg3.jpg");

}

.slide-active{

display:block;

}

.button{

position:absolute;

width:40px;

height:80px;

left:244px;

top:50%;

margin-top:-40px;

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

}

.button:hover{

background-color:#333;

opacity:0.8;

filter:alpha(opacity=80)

}

.next{

left:auto;

right:0px;

}

.prev{

transform:rotate(180deg);

}

.dots{

position:absolute;

right:20px;

bottom:24px;

text-align:right;

/*margin-right:10px;*/

}

.dots span{

display:inline-block;

line-height:12px;

width:12px;

height:12px;

border-radius:50%;

background:rgba(7,17,27,0.4);

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

margin-left:10px;

cursor:pointer;

}

.dots span.active{

box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset;

background:#fff;

}

/*导航菜单*/

.menu-box{

width:244px;

height:460px;

position:absolute;

left:0;

top:0;

background:rgba(7,17,27,0.5);

opacity:0.5;

z-index:1;

}

.menu-content{

width:244px;

height:454px;

position:absolute;

left:0;

top:0;

z-index:2;

padding-top:6px;

/*background:yellow;*/

}

.menu-item{

height:64px;

line-height:66px;

font-size:16px;

padding:0 24px;

position:relative;

}

.menu-item a:link,.menu-item a:visited{

color:#fff;

}

.menu-item a{

display:block;

border-bottom:1px solid rgba(255,255,255,0.2);

padding:0px 8px;

height:63px;

}

.menu-item i{

position:absolute;

right:32px;

/*font-size:24px;*/

top:2;

font-style:normal;

font-width:normal;

color:rgba(255,255,255,0.5);

}

.sub-menu{

width:730px;

height:458px;

border:1px solid #d9dde1;

background:#fff;

position:absolute;

top:0;

left:244px;

z-index:3;

box-shadow:0 4px 8px 0 rgba(0,0,0,0.1);

}

.inner-box{

width:100%;

height:100%;

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

display:none;

}

.sub-inner-box{

width:652px;

margin-left:40px;

overflow:hidden;

}

.sub-row{

margin-bottom:25px;

}

.title{

color:#f01414;

font-size:16px;

line-height:16px;

margin:28px 0 30px 0;

font-weight:bold;

}

.bold{

font-weight:bold;

}

.mr10{

margin-right:10px;

}

.ml10{

margin-left:10px;

}

.hide{

display:none;

}

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</a>

</a>

</div>

</div>

</body>

</html>

// 封装一个代替getElementById()的函数方法

function byId(id){

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

}

// function byid(id){

// if(typeof(id)==="string"){

// return document.getElementById(id);

// }else{

// return id;

// }

// 全局变量

var index=0;

var timer=null;

var pics=byId("banner").getElementsByTagName("div");

var len=pics.length;

var dots=byId("dots").getElementsByTagName("span");

var prev=byId("prev");

var next=byId("next");

var menu=byId("menu-content")

var menuItems=menu.getElementsByTagName("div");

var subMenu=byId("sub-menu");

var innerBox=subMenu.getElementsByClassName("inner-box");

function slideImg(){

var main=byId("main");

// 鼠标滑过暂停清除定时器

main.onmouseover=function(){

if(timer) clearInterval(timer);

}

// 鼠标滑出继续

main.onmouseout=function(){

timer=setInterval(function(){

index++;

if(index>=len){

index=0;

}

// 切换图片

changeImg()

},2000);

}

// 自动在main上触发鼠标滑出时间

// main.onmouseout()

// 遍历所有的圆点，绑定点击事件

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

dots[d].id=d;

dots[d].onclick=function(){

// 让切换图片用的index等于span的ID值（即用ID值代替了索引值）

index=this.id;

// 调用切换图片函数

changeImg();

}

// 上一张按钮

prev.onclick=function(){

index--;

if(index<0){

index=len-1;

}

changeImg();

}

// 下一张按钮

next.onclick=function(){

index++;

if(index>=len){

index=0;

}

changeImg();

}

// 导航菜单

// 遍历主菜单且绑定点击事件

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

// 每一个menu-item定义data-index,作为索引

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

menuItems[m].onmouseover = function(){

// subs[m].style.display="block";

for(var j=0;j<innerBox.length;j++){

innerBox[j].style.display="none"

menuItems[j].style.background="none"

}

var idx=this.getAttribute("data-index");

subMenu.className="sub-menu";

innerBox[idx].style.display="block";

menuItems[idx].style.background="rgba(0,0,0,0.1)"

// console.log(idx)

// alert("hello")

}

// 滑出主菜单子菜单隐藏

menu.onmouseout=function(){

subMenu.className="sub-menu hide"

}

// 滑过子菜单时，子菜单显示

subMenu.onmouseover=function(){

this.className="sub-menu"

}

// 滑出子菜单时，子菜单隐藏

subMenu.onmouseout=function(){

this.className="sub-menu hide"

}

// 主分类菜单选中状态

// 滑出主分类菜单，背景色消失

menuItems[m].onmouseout=function(){

this.style.background="none"

}

slideImg();

// 切换图片方法

function changeImg(){

// 遍历banner下所有的div设置隐藏；遍历dots所有的span清除类

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

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

dots[i].className="none";

}

// pics[index].className="slide-active";

// 根据index索引找到当前的div设为显示;找到当前的span设为显示

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

dots[index].className="active";

}

写回答

2回答

好帮手慕糖

2019-04-22

同学你好，1、不是的哦，是因为写在for (var m = 0; m < menuItems.length; m++)这个for循环中哦，例：

2、idx这个变量不是全局，但是innerBox[idx]、menuItems[idx]与这里变量是同一作用域哦，都在onmouseover这个事件中，所以是可以使用的哦。

希望能帮助到你，祝学习愉快！

好帮手慕糖

2019-04-22

同学你好，是指如下，这个背景颜色在鼠标移入的时候，没有效果是吗？

这里是因为，鼠标移出事件要存放在for这个循环中哦，不在循环中的话，m无法对应到每一项哦，例：

希望能帮助到你，祝学习愉快！

heeluo

h 2.innerBox[idx].onmouseover,innerBox[idx].onmouseout函数为什么也可以引用idx变量，这个idx并不是全局变量呀

h019-04-22

共2条回复

0 学习 · 36712 问题

查看课程

相似问题

背景图片和背景颜色同时设置时，背景图片会覆盖背景颜色

回答 2

背景色清除问题

回答 1

老师，按钮下一张，上一张无法切换图？还有子菜单背景不显示？怎么回事啊？

回答 2

求助：为什么最后改变背景颜色这一步不能在css里加hover呢？

回答 1

老师，主菜单的背景色怎么消失？当滑出主菜单时，背景色没有消失

回答 1

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