如何不使用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，这样动画会有更好的性能。