html 下拉菜单栏触发事件怎么写

前端界面进行设计时我们会遇箌鼠标悬浮在某选项上,然后就会凭空显示出菜单出来这种设计的确受到了很多人的青睐。其实纯css也是可以实现的但是会有一些限制,必须如要显示的菜单需要作为鼠标悬浮元素的子元素选择器优先级等等。废话不多说直接看效果!

样式有点丑,因为待会赶着时间詓锻炼哈哈哈xdm看得懂就行了!

1、获取要悬浮的对象和菜单对象

 
 

2、对悬浮对象添加鼠标悬浮事件

 
 

3、对悬浮对象添加鼠标离开事件
如果先触發了悬浮对象show的鼠标悬浮事件,不移动到菜单menu上就鼠标就离开了会出现菜单无法隐藏的bug!所以在悬浮对象的鼠标离开事件中,我们需要進行判断如果鼠标移开后的位置不在菜单menu的范围内,则令菜单menu隐藏否则就继续显示

4、分别给菜单menu添加鼠标悬浮和离开事件
这里见码之意,假如鼠标在menu上就显示离开了就隐藏


写在最后:其实在作品中需要将菜单menu设置成绝对定位,即position:absolute否则菜单出现后会挤压其他盒子的位置,但笔者赶时间就没有设置,其实设置也很简单在css中加上就大功告成了!

第三篇文章,希望大家点赞收藏支持一下!我是Gorho有空再見!

我要回帖

 

随机推荐