位置: IT常识 - 正文

vue 鼠标移入移出(hover)切换显示图片问题

编辑:rootadmin
这篇文章主要介绍了vue 鼠标移入移出(hover)切换显示图片问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教 目录

推荐整理分享vue 鼠标移入移出(hover)切换显示图片问题,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

鼠标移入移出(hover)切换显示图片css实现js实现vue鼠标移入移出事件注意事项发生冒泡事件一、解决方法二、定义三、两对鼠标事件的区别鼠标移入移出(hover)切换显示图片css实现

代码:

<div @click="exitConnect()" class="exit_hover">       <img class="exit1 mr10" :src="https://www.jb51.net/article/exit" />       <img class="exit2 mr10" :src="https://www.jb51.net/article/exitActive" />断开连接</div>

css:

.exit_hover .exit1{display:inline-block;}.exit_hover .exit2{display:none;}.exit_hover:hover .exit1{display:none;}.exit_hover:hover .exit2{display:inline-block;}js实现

使用一个变量来表示鼠标移入或移出的状态,鼠标移入事件mouseenter,移出事件mouseleave,在这两个事件中来修改这个变量。

注意:移出事件别用mouseout。

代码:

<div @mouseenter="isExitHover=true" @mouseleave="isExitHover=false" class="menus">       <img v-show="!isExitHover" :src="https://www.jb51.net/article/exit" class="mr10" />       <img v-show="isExitHover" :src="https://www.jb51.net/article/exitActive" class="mr10" />断开连接</div>

data:

            exit: require("@/assets/img/exit.svg"),            exitActive: require("@/assets/img/exit_active.svg"),            isExitHover:false,//是否悬浮到图标上vue鼠标移入移出事件注意事项发生冒泡事件

今天在写一个鼠标的移入移出的事件,使用mouseout和mouseover期间,踩了一个大坑,经过半天的排查,终于发现是发生了冒泡事件。

把mouseout和mouseover绑在父元素上,移过父元素和子元素都会触发。即子元素mouseover和mouseout事件会冒泡至父元素

一、解决方法

使用 mouseenter 和 mouseleave 事件。

这两个事件是根据组件在页面上的范围进行计算的,只要在某个组件上添加了这两个事件,会计算鼠标的位置,只要在组件范围内,就可以触发。

二、定义

1、mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发,这个事件不冒泡。

vue 鼠标移入移出(hover)切换显示图片问题

2、mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发,这个事件不冒泡。

3、mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发。

4、mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部,也可能是该元素的子元素。

三、两对鼠标事件的区别

其中,mouseover触发优先级高于mouseenter,mouseout触发优先级高于mouseleave

1、mouseover 和 mouseout

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover

不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。

是根据鼠标事件的target进行触发的,是一种精确触发。当为某一组件(如div)设置这两个事件时,当事件的target是该组件时,就会触发mouseover,但是当鼠标划到该组件的子组件上时,因为target改变了,所以就触发了 mouseout 事件,这往往就会造成页面元素的闪烁,反复触发移入移出事件。

2、mouseenter 和 mouseleave

只有在鼠标指针从元素外穿入被选元素(到元素内)时,才会触发 mouseenter 事件。

只有在鼠标指针从元素内穿出被选元素(到元素外)时,才会触发 mouseleave 事件。

mouseenter 和 mouseleave是根据组件在页面的范围(坐标)进行触发的。不管组件中是否有子组件,只要鼠标进入到组件的范围内,就可以触发mouseenter事件,离开范围,则触发mouseleave事件。

总结一下:

在实际开发过程中,更多的是针对范围的操作。如果鼠标在某个组件(如div)范围内就触发进入组件的操作,如果离开这个组件的页面范围,就触发离开的事件。

所以,一般情况下都不推荐使用mouseover与mouseout 最好使用mouseleave 与 mouseenter

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

本文链接地址:https://www.jiuchutong.com/zhishi/310690.html 转载请保留说明!

上一篇:python中Locust的安装和使用(python locator)

下一篇:Python举例实现马耳可夫链算法(python mad)

  • 企业产生的所得税计入
  • 应纳附加税是什么
  • 公司注销了账本还需保留吗
  • 疫情期间发生的费用进什么科目
  • 小规模企业所得税多少
  • 生产车间安装监控的目的
  • 个人销售自产农产品 个人所得税
  • 销售免税产品怎么做分录
  • 经常性支出是什么意思
  • 接受现金捐赠怎么写分录
  • 收到供应商赔偿的违约金
  • 员工借款可以直接转账吗
  • 企业收到发要失控发票做进项税额转出如何做税务处理?
  • 哪些费用应该计税
  • 小规模纳税人要做账吗
  • 一般纳税人开3个点的票不能抵扣进项
  • 开发转产品好转吗
  • 库存虚增怎么调账
  • 所得税申报表中的营业成本包括费用吗
  • 接受应税劳务的会计分录
  • 分公司向总公司转钱可以吗
  • 其他综合收益也要交税吗
  • 企业所得税按月或者按季预缴
  • .exe是啥
  • 电脑很空但是占用率90
  • linux怎么更改账户名
  • 自定义发件人邮件
  • 发票已付款未认账怎么办
  • 绿萝可以放卧室吗晚上睡觉对人害吗
  • 收到进项税发票如何入账
  • 业务招待费会计分录
  • 城镇土地使用税纳税义务发生时间
  • 采购材料尚未入库款未付的记账凭证
  • vue 动态添加路由
  • yolov5配置
  • vue的路由跳转了,可是页面没有变化
  • get请求有哪些
  • python中的count函数
  • 自然人独资可以变更为有限责任公司
  • 用工会经费给员工发工资
  • Vite + Vue2 + Vuetify2 + <script setup> + TypeScript 搭配开发项目
  • 3月1日前包括什么意思
  • CentOS 6.5 x64系统中安装MongoDB 2.6.0二进制发行版教程
  • 专项附加扣除批量上传怎么上传
  • 非公司员工可以报销差旅费吗
  • 增值税普通发票和电子普通发票的区别
  • 存货是指企业在生产经营过程中为销售或耗用
  • 金蝶结转销售成本
  • 主营业务成本借贷方向增减
  • 进项税额转出的几种情况
  • 购进生产免税货物用材料可以抵扣进项税额吗
  • 收到上个月退税会计分录
  • 其他应收款项
  • 固定资产折旧方法不考虑净残值
  • 没有发票的费用怎么入账
  • 差旅费可以加计吗
  • 处置固定资产和报废固定资产区别
  • 小规模公司购买汽车如何抵税
  • 贴现收到票据时会计分录
  • 淘宝电商怎么做账
  • 企业之间土地交易
  • sqlserver获取当天零点时间
  • window打开注册表
  • win98拨号上网
  • win10 20h2体验
  • linux系统添加用户的命令
  • win7j
  • 延迟windows更新
  • windows10右键菜单被任务栏挡
  • Win10用户狂喷微软:更新日志功能还没加上去
  • vi 技巧
  • cocos jsc
  • 运行shell脚本命令 sh
  • bootstrap按钮的风格有哪些?
  • python中lxml模块
  • 陕西省税务局发来信息通知
  • 小规模纳税人营业额
  • 高新区地税办税服务厅
  • 招投标文件未规定怎么办
  • 微信如何查询个人名下所有银行卡
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设