Vue中mouseover和mouseenter实现hover功能有何不同？

本文共计694个文字，预计阅读时间需要3分钟。

目录Vue实现Hover功能：mouseover和mouseenter的区别案例：Vue hover的两个小技巧第一个小技巧：导航栏的hover效果，直接存在第二个小技巧：鼠标移入移出效果

Vue实现Hover功能：mouseover和mouseenter的区别在Vue中，实现hover效果通常使用mouseover和mouseenter事件。两者在功能上类似，但存在一些区别。

案例：Vue hover的两个小技巧Vue hover功能可以通过一些小技巧来实现更丰富的效果。

第一个小技巧：导航栏的hover效果，直接存在通过设置CSS样式，可以在鼠标悬停时直接改变导航栏的样式。

第二个小技巧：鼠标移入移出效果利用Vue的事件绑定，可以实现在鼠标移入和移出时触发不同的操作。

目录

• Vue实现Hover功能
• mouseover 和 mouseenter 的区别
• 案例
• Vue hover的两个小技巧
• 第一个小技巧：导航栏的hover效果，一直存在
• 第二个小技巧：鼠标移入移出效果

Vue实现Hover功能

mouseover 和 mouseenter 的区别

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

• hover 事件调用顺序

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

案例

案例效果

案例代码

<template> <div class="hover-view" @mouseover="mouseover" @mouseenter="mouseenter" @mousemove="mousemove" @mouseout="mouseout" @mouseleave="mouseleave" @mousedown="mousedown" @mouseup="mouseup" > </div> </template> <script> export default { methods: { // 1、进入元素 mouseover () { console.log('mouseover') }, // 2、进入元素 mouseenter () { console.log('mouseenter') }, // 3、移动 mousemove () { console.log('mousemove') }, // 4、离开元素 mouseout () { console.log('mouseout') }, // 5、离开元素 mouseleave () { console.log('mouseleave') }, // 6、鼠标在元素上 按下 mousedown () { console.log('mousedown') }, // 7、鼠标在元素上 抬起 mouseup () { console.log('mouseup') } } } </script> <style> .hover-view { width: 100px; height: 100px; background-color: red; } </style>

Vue hover的两个小技巧

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

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

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

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

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

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