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-cli3项目打包后自动化部署到服务器的方法
这篇文章主要介绍了vue-cli3项目打包后自动化部署到服务器的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-09
Vue Transition实现类原生组件跳转过渡动画的示例
本篇文章主要介绍了Vue Transition实现类原生组件跳转过渡动画的示例，具有一定的参考价值，有兴趣的可以了解一下
2017-08-08
vue项目element UI 版本升级过程遇到的问题及解决方案
这篇文章主要介绍了vue项目element UI 版本升级过程遇到的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue利用相反数实现飘窗动画效果
飘窗，即一个类似小窗子的在网页上移动的矩形元素，通常被用于一些通知类的应用场景。本文将利用相反数实现这一动画效果，需要的可以参考一下
2022-05-05
vue如何截取字符串
这篇文章主要介绍了vue如何截取字符串，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
el-input设置后缀显示单位并阻止滚轮微调的解决方法
在Element UI或Element Plus中,使用el-input组件时,可以通过suffix插槽添加单位显示,如果设置了type为'number',滚轮滚动可能会导致数值微调,解决方法是阻止滚轮事件的默认行为,并用CSS隐藏掉输入框的上下箭头,确保数值输入的准确性,这样既美观又提升了用户体验
2024-09-09
Vue Router如何刷新当前页面
Vue项目, 在实际工作中, 有些时候需要在加载完某些数据之后对当前页面进行刷新, 这篇文章主要为大家介绍了三种常用方法,需要的可以参考一下
2023-10-10
Vue3实现可视化拖拽标签小程序功能
这篇文章主要介绍了Vue3实现可视化拖拽标签小程序,实现功能可视化标签拖拽，双击标签可修改标签内容，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-09-09
Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）
这篇文章主要给大家介绍了关于Vue组件间通信的相关资料，其中包括父子组件、兄弟组件及祖先后代组件间的通信，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04
vue使用$emit传递参数方式
这篇文章主要介绍了vue使用$emit传递参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04