您现在的位置是:首页 > 文章详情

如何不使用js实现鼠标hover弹出菜单效果

日期:2018-12-28点击:324

最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的,默认给弹出隐藏掉,通过js事件绑定动态的显/隐弹出菜单元素。

<ul> <li>主页</li> <li>新闻</li> <li id="more">更多</li> <div class="menu" id="menu"> <ul> <li>退出登录</li> <li>更改密码</li> </ul> </div> </ul> 
<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和按钮之间改成父子结构

<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伪类和子代选择带

.menu { display: none; } .more:hover>.menu{ display: block; } 

就这样就完成啦,代码比之前精简了不少,少了很多js变量,还不用担心dom事件绑定与解绑的问题。

如果想要有更好的用户体验,还可以加上css3的过渡动画。但需要注意的是元素默认display:none的话是不会有动画效果的,需要把display:none;改成visibility:hidden;

而且最好让.menu脱离文档流,比方说给它的position设置成fixed或者absolute,使用transform而不是left、top,这样动画会有更好的性能。

原文链接:https://my.oschina.net/u/988463/blog/2994683
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章