滑过主菜单显示问题

html

</div>

</div>

<a href="#">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">手机存储卡</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

css

/*左边主菜单样式*/

.banner .menu-content{

position: absolute;

top:-55px;

left:0;

width: 230px;

height: 695px;

background: #f01414;

}

.banner .menu-item{

font-size: 15px;

color: #fff;

height: 45px;

line-height: 45px;

padding:0 20px;

position: relative;

}

.banner .menu-item1{

color: #fff;

line-height: 45px;

height: 45px;

padding:5px 20px;

background:rgba(0,0,0,0.5);

opacity: 0.8;

}

.banner .menu-item1 img,

.banner .menu-item1 span{

vertical-align: middle;

}

.banner .menu-item i{

font-style: normal;

position: absolute;

right: 10px;

font-size: 18px;

}

/*.banner .menu-item:hover{

background: #fff;

color: #f01414;

cursor: pointer;

}*/

/*.banner .menu-item1:hover{

background:rgba(0,0,0,0.5);

color: #fff;

opacity: 0.8;

}*/

/*子菜单栏样式*/

.banner .sub-menu{

width: 700px;

height: 690px;

position: absolute;

top:0;

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

left:229px;

background: #fff;

border: 1px solid #d9dde1;

overflow: hidden;

z-index: 999;

}

.banner .sub-menu .inner-box{

width: 100%;

height: 100%;

display: none;

}

.inner-box .sub-row{

font-size: 13px;

margin:40px;

}

.inner-box .sub-row .hh a{

display: inline-block;

height: 27px;

line-height: 27px;

color: #999;

padding-right: 10px;

text-align: left;

}

.inner-box .sub-row a:hover{

color: #f01414;

}

.hh{

width: 520px;

float: left;

margin-bottom: 50px;

}

.title{

margin-bottom: 50px;

text-align: right;

width: 60px;

height: 27px;

line-height: 27px;

font-weight: bold;

float: left;

margin-right: 10px;

cursor: pointer;

}

.mr10{

margin-bottom: 50px;

float: left;

height: 27px;

line-height: 27px;

text-align: center;

width: 10px;

color: #999;

margin-right: 10px;

}

.ml10{

margin-left: 5px;

}

.hide{

display: none;

}

// 滑过主菜单显示子菜单

$('.menu-item').each(function(index){

$('.menu-item').eq(index).mouseover(function(){

$('.hide').css({display:'block'});

// 滑过主菜单改变主菜单的样式

$('.menu-item').css('cursor','pointer');

$('.menu-item').eq(index).css({

background: '#fff',

color: '#f01414'

}).siblings().css({

background: 'none',

color: '#fff'

});

}).mouseout(function(){

$('.hide').css({display:'none'});

});

})

老师为啥滑过主菜单的时候，最上面的商品分类那项的背景颜色也发生改变

夕落呀 2018-11-01

源自：项目：JQ实现瀑布流 5-2 作业题

收起

3回答

好帮手慕夭夭回答被采纳获得+3积分 2018-11-01 15:16:19

你好同学 :

1.按照回复区域新上传的代码进行测试 , 商品分类颜色发生改变是因为标题与菜单时同级元素 ,如下:

标题menu-item1与下面的菜单menu-item是兄弟元素 ,所以siblings会查找到所有的兄弟元素 ,

可以如下在siblings中指定查找menu-item就可以了 :

2.同学的第二个问题 ,老师给一个思路 :

这里是建议同学修改一下结构 ,整个侧栏放在一个大盒子中 ,标题和菜单如下结构 :

然后菜单的ul中 ,每个li都存放一个一级菜单和它的二级菜单 , 二级菜单默认使用diaplay:none隐藏的 .位置可以使用定位 . 如下:

在css中可以先把鼠标移入的样式先定义一下 ,例如:

可以在js脚本中为每个整体的li绑定事件hover事件 , 如下

如上 , 因为把菜单与二级菜单放在一个li中了 ,所以直接给它们整体的盒子绑定事件 .这样鼠标移入到子菜单时 , 子菜单就不会隐藏了 .

以上作为一个思路的参考 , 具体还需要集合自身代码去实现样式 . 如果同学有自己的思路 , 老师鼓励按照自己的思路先去实现 . 然后老师在帮你进行指导

实战一下吧 , 祝学习愉快 ,望采纳

收起回答

好帮手慕夭夭 2018-11-01 14:16:54

你好同学 ,老师使用上传的代码测试 ,菜单时没有样式的 ,如下 :

请同学把完整的代码上传一下 ,以便老师准确有效的进行测试 .

(如果代码太多 ,上传不了 ,可以先完善其他内容 ,然后提交作业 , 批作业的老师也会进行详细指导的 .)

祝学习愉快 !

收起回答

提问者夕落呀 2018-11-01 14:01:23

// 滑过主菜单显示子菜单

// 遍历主菜单

$('.menu-item').each(function(index){

$('.menu-item').eq(index).mouseover(function(){

// 滑过主菜单显示子菜单框

$('.hide').css({display:'block'});

// 滑过主菜单改变主菜单的样式

$('.menu-item').eq(index).css({

cursor:'pointer',

background: '#fff',

color: '#f01414'

}).siblings().css({

background: 'none',

color: '#fff'

});

// 滑过主菜单显示子菜单内容

$('.inner-box').eq(index).css({

display:'block'

}).siblings().css({

display:'none'

});

}).mouseout(function(){

// 离开主菜单隐藏子菜单框

$('.hide').css({display:'none'});

});

老师当离开主菜单来到子菜单的时候子菜单不隐藏，我这里写的当一离开主菜单子菜单就隐藏了？不会改了

收起回答

提问者夕落呀 #1

老师当离开主菜单来到子菜单的时候子菜单不隐藏，我写的当一离开主菜单子菜单就隐藏了，可以给个思路吗

2018-11-01 14:35:40

相似问题

主要问题，当鼠标离开菜单区域时，如何去掉主菜单中的背景颜色

主菜单划到子菜单但是子菜单不显示

请问为什么移入二级菜单还是没显示出来。

如何使菜单选中的效果取消掉

鼠标离开主菜单子菜单隐藏的问题

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36713 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

滑过主菜单显示问题

滑过主菜单显示问题

正在回答

请选择置顶位置