Vue实现Hover功能(mouseover与mouseenter的区别及说明)_vue.js_

Vue实现Hover功能

mouseover 和 mouseenter 的区别

• mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是 mouseout
• mouseenter:当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡。对应的移除事件是 mouseleave
• 通过图片进行分析 冒泡 情况

• hover 事件调用顺序

mouseover ->mouseenter ->mousemove(hover进去之后移动会触发) ->mouseout ->mouseleave

案例

案例效果

案例代码

Vue hover的两个小技巧

第一个小技巧：导航栏的hover效果，一直存在

先使用this.$route.path获取当前路径，进行判断

第二个小技巧：鼠标移入移出效果

hoverIndex不能为0，因为第一个li的索引是0。也不能大于0

当鼠标移入的时候index === hoverIndex，当鼠标移出的时候把hoverIndex设置为-1就可以了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！