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

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

效果如下:

鼠标悬浮显示下拉菜单,离开隐藏_第1张图片

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

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

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

前端代码

JS代码

错误效果:

鼠标悬浮显示下拉菜单,离开隐藏_第2张图片

你可能感兴趣的:(1024程序员节,前端,javascript)