顶部下拉菜单问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>大项目作业</title> <link href="大项目作业.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="main"> <div class="header"> <div class="headBtn"> <a id="loginLink" href="#">亲，请登录</a> <a id="registerLink" href="#">免费注册</a> <a id="checkImooc" href="#">手机逛慕课</a> </div> <div class="firstMenu"> <div>我的慕课 <img src="素材/icon/21.jpg"/></div> <div class="secondMenu"> <a href="#">已买到的宝贝</a> </div> <div class="secondMenu"> <a href="#">我的足迹</a> </div> </div> <div class="firstMenu"> <div>我的慕课 <img src="素材/icon/21.jpg"/></div> <div class="secondMenu"> <a href="#">已买到的宝贝</a> </div> <div class="secondMenu"> <a href="#">我的足迹</a> </div> </div> <div class="firstMenu"> <div>我的慕课 <img src="素材/icon/21.jpg"/></div> <div class="secondMenu"> <a href="#">已买到的宝贝</a> </div> <div class="secondMenu"> <a href="#">我的足迹</a> </div> </div> <div class="firstMenu"> <div>我的慕课 <img src="素材/icon/21.jpg"/></div> <div class="secondMenu"> <a href="#">已买到的宝贝</a> </div> <div class="secondMenu"> <a href="#">我的足迹</a> </div> </div> <div class="firstMenu"> <div>我的慕课 <img src="素材/icon/21.jpg"/></div> <div class="secondMenu"> <a href="#">已买到的宝贝</a> </div> <div class="secondMenu"> <a href="#">我的足迹</a> </div> </div> <hr/> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="大项目作业.js"></script> </body> </html>
*{margin:0px;padding:0px;}
.main{
height:1200px;/*暂时*/
width:1350px;
background-color:#f3f5f7;
/*border:1px solid black;*/
}
/*头部*/
.header{
width:1000px;
height:50px;
border:1px solid black;
margin:0 auto;
}
.headBtn a {margin-right:20px;}
a{text-decoration: none}
a:hover{
color:red;
}
.firstMenu{
height:100px;
width:100px;
/*border:solid 1px black;*/
float:right;
}
.secondMenu{
display:none;
}
.changeWhite{
background-color: white;
}
.changeBlue{
background-color: #B0E2FF;
}/*头部*/
$('.firstMenu').mouseover(function(event){
$(event.target).find('.secondMenu').show();
$(event.target).addClass('changeWhite');
})
$('.firstMenu').mouseout(function(event){
$(event.target).children('.secondMenu').hide()
$(event.target).removeClass('changeWhite');
})
$('.secondMenu').mouseover(function(event){
$(event.target).addClass('changeBlue');
})
$('.secondMenu').mouseout(function(event){
$(event.target).removeClass('changeBlue');
})关于下拉菜单我实在搞不明白为什么会出现现在这种错误的效果，无法给选中的子菜单添加颜色，子菜单发生闪烁，浮动出现问题。头好晕，请老师帮帮我
正在回答 回答被采纳积分+1
你好同学 , 解答如下:
1.event.target就像同学说的那样 ,我鼠标移入到那个元素 ,它代表的就是哪个元素 .
如上当你移出时 , 就会触发下拉菜单显示 , 如下:
因为鼠标没有办法截图, 如下红框中就表示移入菜单时的箭头 . 由于这个时候下拉菜单显示出来的了 , 你的鼠标在浮在了下拉菜单上面 .
由于event.target是不会冒泡的 ,永远指向的事件源对象 , 当鼠标浮在下拉菜单时 ,event.target指的就是secondMenu , 所以这个时候就触发firstMenu的mouseout事件 . 下拉菜单就隐藏了 ,隐藏之后鼠标就又浮在了firstMenu , 继而又触发firstMenu的mouseover事件让下拉菜单显示 . 所以反复执行移入移出事件 ,就出现闪动的效果了 .
(因为冒泡本阶段同学还不太容易理解 , 同学先简单的理解 , 当鼠标在子元素上面触发事件时 , 父元素事件也跟着触发) .
2.this一般我们都是它指向的是函数的调用者 , 这里同学理解的就有偏差了 , 虽然事件绑定在了firstMenu ,但是this并不是指所有的firstMenu ,而是当那个元素触发事件时 ,指的就是哪个元素 .和event.target差不多 ,
区别是 ,this是可以冒泡的 , 当你在移入firstMenu ,此时下拉菜单显示 ,相当于鼠标移入到了下拉菜单 , 事件会冒泡往上查找它的父元素 ,发现父元素绑定了移入事件 ,所以下拉菜单还是不会继续显示 , 不会出现闪动的效果了
2.因为父元素盒子塔高了 ,所以你还有移入到我的慕课上面就会触发事件
所以这里老师让你去掉高度 ,因为下拉菜单是隐藏的 , 默认自适应一级菜单的高度就可以了 . 同学在看一下老师第一次回复 , 截图中是去掉firstMenu高度 ,并不是要去掉header的高度哦 .
希望能够解答你的疑惑 , 祝学习愉快 ,望采纳
你好同学 , 出现闪动的原因是你使用的event.target .
event.target指触发事件的当前元素 .当你移入时 , 会触发firstMenu的事件 , 此时下拉菜单显示 , 你的鼠标就落在了下拉菜单上面 , event.target就会指向的下拉菜单 ,而不是firstMenu , 所以会触发firstMenu的移开事件 ,下拉菜单隐藏 . 隐藏之后你的鼠标有落在firstMenu ,所以又再次让下拉菜单显示 ,这里可能有点绕 .慢慢理解一下 .
所以不要使用event.target , 因为它永远指向的是事件触发的源对象 . 而使用this ,因为this的是可以变化的 , 当你鼠标移入到下来菜单时 ,事件会冒泡到父元素事件上面 .(冒泡暂时了解一下 , 以后高级的课程中会有详细的讲解的)
先去掉高度 ,父元素高度自适应就可以了 :
改成this :
该后同学设置的效果就能出来了 ,祝学习愉快 ,望采纳 .
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星