鼠标悬浮显示下拉菜单，离开隐藏

结合实际来考虑，下拉菜单和头像需要放在同一容器中。当用户打开下拉菜单需要使用其中的功能时，鼠标位置必然转移，若此时离开头像所在容器的范围，就会触发onmouseout()事件，调用函数，下拉菜单收起。因此头像和下拉菜单必须存放在同一容器中。下拉菜单的显示隐藏只需要设置display的属性就好了，在这个功能中的核心问题是，下拉菜单的位置。不同容器的效果图放在文章最后。

巴巴爸爸唱芭芭拉

4534人浏览 · 2022-10-27 17:53:42

巴巴爸爸唱芭芭拉 · 2022-10-27 17:53:42 发布

在网页版的csdn中，当用户将鼠标悬浮在头像框上时，会自动显示一个下拉菜单，这篇博客实现的就是这样的功能，但在文章内只记录核心的功能，不对样式做过多修饰

效果如下：

下拉菜单的显示隐藏只需要设置display的属性就好了，在这个功能中的核心问题是，下拉菜单的位置

结合实际来考虑，下拉菜单和头像需要放在同一容器中。当用户打开下拉菜单需要使用其中的功能时，鼠标位置必然转移，若此时离开头像所在容器的范围，就会触发onmouseout()事件，调用函数，下拉菜单收起。因此头像和下拉菜单必须存放在同一容器中

不同容器的效果图放在文章最后。

前端代码

<div id="nav" onmouseover="block()" onmouseout="cancel()">
        <img id="img" src="./image/1.jpg" alt="">
        <div id="menu">
            <ul>
                <li></li>
                <li>设置</li>
                <li>个人中心</li>
                <li>内容管理</li>
                <li>退出登录</li>
            </ul>
        </div>
    </div>

JS代码

<script>
    function block(){
        document.getElementById("menu").style="display:block";
    }

    function cancel(){
        document.getElementById("menu").style="display:none";
    }
</script>