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

更新时间：2022年10月10日 09:28:02 作者：卡尔特斯

这篇文章主要介绍了Vue实现Hover功能(mouseover与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就可以了

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

您可能感兴趣的文章:

Vue项目中new Vue()和export default{}的区别说明
这篇文章主要介绍了Vue项目中new Vue()和export default{}的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
详解vue如何给特殊字段设置插槽
这篇文章主要为大家详细介绍了vue如何实现给特殊字段设置插槽,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以学习一下
2023-09-09
解决threeJS加载obj gltf模型后颜色太暗的方法
这篇文章主要为大家介绍了解决threeJS加载obj gltf模型后颜色太暗的方法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
一文教你解决Vue所有报错
Vue是一个流行的前端框架，许多web开发人员使用Vue来构建他们的应用程序。然而，正如任何其他框架一样，Vue也可能会发生错误。在这篇技术文章中，我们将探讨Vue常见的报错以及如何解决它们
2023-03-03
Vue.js 中的实用工具方法【推荐】
这篇文章主要介绍了Vue.js 中的实用工具方法，本文是小编日常开发中常用的一些工具方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-07-07
vue+element 分页封装的实现示例
本文主要介绍了vue+element 分页封装的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
vue+element树组件实现树懒加载的过程详解
这篇文章主要介绍了vue+element树组件实现树懒加载的过程，本文通过图文实例代码相结合给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-10-10
使用this.$router.go(-1)遇到的一些问题及解决
这篇文章主要介绍了使用this.$router.go(-1)遇到的一些问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
vue axios post发送复杂对象问题
现在vue项目中，一般使用axios发送请求去后台拉取数据。这篇文章主要介绍了vue axios post发送复杂对象的一点思考,需要的朋友可以参考下
2019-06-06
vuex中mapState思想应用
这篇文章主要分享vuex中mapState思想及应用，在需求开发过程中，有的接口返回的结果中有很多字段需要展示到页面上。通常可以将这些字段在.vue文件中封装为计算属性，或者重新将对应字段赋值到 data 中的字段来达到便于使用的目的，具体内容，我们一起来看下面文章内容吧
2021-10-10