vue软件（Vue实现Hover功能(mouseover与mouseenter的区别及说明)）
导读：Vue实现Hover功能 mouseover 和 mouseenter 的区别 mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是 mouseout mouseenter:当鼠标移入元素本身（不包含元素的子元素）会触发事...
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就可以了
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！