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

最近看到不少同窗在实现鼠标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，这样动画会有更好的性能。