如何不使用js实现鼠标hover弹出菜单效果
2019-01-06 23:15
387 查看
最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的,默认给弹出隐藏掉,通过js事件绑定动态的显/隐弹出菜单元素。
[code]<ul> <li>主页</li> <li>新闻</li> <li id="more">更多</li> <div class="menu" id="menu"> <ul> <li>退出登录</li> <li>更改密码</li> </ul> </div> </ul>
[code]<style> .menu{ display: none; } </style> <script> window.onload=function(){ var menu=document.getElementById('menu'); var more=document.getElementById('more'); more.addEventListener('mouseenter',function(){ menu.style.display="block"; }); more.addEventListener('mouseleave',function(){ menu.style.display="none"; }); } </script>
这种写法是比较流行的写法,但这种写法需要用到js,多多少少有一点不优雅。现在笔者向大家介绍一种使用css伪类结合子代选择器的方式来实现同样效果的办法。
1.首先需要改变一下dom结构,弹出菜单div和按钮之间改成父子结构
[code]<ul> <li>主页</li> <li>新闻</li> <li id="more" class="more"> <span>更多</span> <div class="menu" id="menu"> <ul> <li>退出登录</li> <li>更改密码</li> </ul> </div> </li> </ul>
2.将之前的script代码统统删掉,改用css伪类和子代选择带
[code].menu { display: none; } .more:hover>.menu{ display: block; }
就这样就完成啦,代码比之前精简了不少,少了很多js变量,还不用担心dom事件绑定与解绑的问题。
如果想要有更好的用户体验,还可以加上css3的过渡动画。但需要注意的是元素默认display:none的话是不会有动画效果的,需要把display:none;改成visibility:hidden;
而且最好让.menu脱离文档流,比方说给它的position设置成fixed或者absolute,使用transform而不是left、top,这样动画会有更好的性能。
相关文章推荐
- js实现鼠标点击左上角滑动菜单效果代码
- js实现鼠标点击左上角滑动菜单效果代码
- JS实现适合于后台使用的动画折叠菜单效果
- JS实现适合于后台使用的动画折叠菜单效果
- js 使用form表单select类实现级联菜单效果
- 在asp.net中如何实现鼠标右健弹出菜单
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- JS实现响应鼠标点击动画渐变弹出层效果代码
- js+css实现带缓冲效果右键弹出菜单
- 使用js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
- js 使用form表单select类实现级联菜单效果
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
- JS实现响应鼠标点击动画渐变弹出层效果代码
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- [置顶] 在网页中使用js简单的实现弹出菜单,请高手飘过
- JS实现侧边栏鼠标经过弹出框+缓冲效果
- JS实现侧边栏鼠标经过弹出框+缓冲效果
- mm_menu.js(实现鼠标移入横向显示二级菜单效果)
- js实现 导航栏二级菜单hover下拉效果