🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 1、开发思路 鼠标放到顶级菜单上,其子菜单滑动显示,鼠标移动到子菜单上,子菜单不能消失; 鼠标离开顶级菜的和子菜单之后,子菜单滑动隐藏; 鼠标必须放到顶级菜单上超过300毫秒,才显示子菜单; # 2、用到的知识点 2.1、全新的事件 ``` mouseover:鼠标放到元素及其子元素上,都会触发事件 mouseout:鼠标离开元素及其子元素,都会触发事件 mouseenter:鼠标放到元素上,会触发事件。移动到它的子元素上,不会再次触发事件。 mouseleave:鼠标离开元素,会触发事件。鼠标离开它的子元素,不会再次触发事件。 hover():参数有两个,两个都是函数,第一个表示鼠标移入执行的函数,第二个表示鼠标离开执行的函数。 ``` 2.2、开阔的思路 2.3、另类的定时器 定时器还可以优化代码,当然用到的也是定时效果。 # 3、完成HTML和css 文件结构和上一个案例一样,所以赋值一份,然后修改其中的css,让菜单横向显示即可。 HTML: ![](https://img.kancloud.cn/19/b3/19b3001c77d1a8e30d7165144dbeb7b7_352x608.png) CSS代码: ![](https://img.kancloud.cn/cd/11/cd113e8a229ad8246f38acc5381dc22e_410x755.png) # 4、JS实现基本的效果 ![](https://img.kancloud.cn/4a/61/4a61e3aaa24057c763efc30386587527_498x734.png) # 5、使用定时器解决BUG 目前的效果,鼠标快速的划来划去,下拉菜单不断显示隐藏。 解决办法是加入定时器,如果真的要显示下拉菜单,需要鼠标悬停300,如果真悬停了300毫秒则显示下拉菜单,如果300毫秒以内,鼠标离开,那么清除定时器,不让显示的代码执行了。 ![](https://img.kancloud.cn/91/89/918962912d733017315fb4ccc6b14043_657x304.png) # 6、mouseover和mouseenter事件对比 mouseover:鼠标放到元素及其子元素上,都会触发事件。 mouseout:鼠标离开元素及其子元素,都会触发事件。 mouseenter:鼠标放到元素上,会触发事件。移动到它的子元素上,不会再次触发事件。 mouseleave:鼠标离开元素,会触发事件。鼠标离开它的子元素,不会再次触发事件。 ![](https://img.kancloud.cn/7f/a8/7fa84a8f6fcfaa5ebf62285b87140b98_1102x629.png)