位置: 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)

  • 个税汇缴常见问题
  • 个人所得税信息采集怎么弄
  • 如何在天猫平台抢茅台
  • 合伙企业的费用在何处扣除
  • 现金流量表现金流量项目明细分类
  • 销售分哪几类
  • 即征即退的增值税属于政府补助
  • 销售旧货的增值税税率
  • 预付账款长期挂账风险
  • 增值税减免所得税填在哪一栏
  • 2019一般纳税人新政策
  • 房地产企业预缴增值税怎么计算
  • 代缴代扣个人所得税手续费
  • 企业住房维修基金怎么交
  • 营改增之后还有营业税吗
  • 防伪税控开票系统SOAP服务端
  • 免税投资背后的风险,你都清楚吗?
  • 保税区内企业出口
  • 主营业务类别商业是什么
  • 销售不动产税务处理
  • 企业购置房产交什么税
  • 酒店固定资产明细表范本
  • 银行代发工资一定要本行卡吗
  • 注册资本多少钱算大公司
  • 存出资本保证金属于什么科目
  • 房地产预缴税金附加可以计提吗
  • win10telnet不是内部或外部命令教程
  • 会计科目明细分类科目表
  • 发票金额与银行付款金额少几分钱
  • php+mongodb
  • 利润分配的会计分录怎么写
  • 计提折旧事考虑了残值净值怎么算
  • js倒数
  • 文心一言中国经济大讲堂
  • gitpull命令
  • @enable
  • 装修费摊销会计准则
  • 购买金税盘的费用会计分录
  • 增值税普通发票和电子普通发票的区别
  • 施工营业额是什么意思
  • js对象模型是什么
  • 辅助生产车间照明费用计入什么科目
  • 印花税报少了交税了怎么办
  • 分公司可以独立开票吗
  • 福利费用属于哪个部门
  • 进口环节缴纳关税计入什么科目
  • 收入费用表本期盈余与资产负债表不一致
  • 银行贷款直接给钱吗
  • 所得税费用结转分录
  • 销售费用主要包括
  • 养老保险 退钱
  • 生活垃圾处理费标准
  • 小规模纳税人销售自己使用过固定资产
  • sql union和join区别
  • 怎么设置xp系统
  • ubuntu怎么安装包
  • win8驱动在哪个文件夹
  • win8系统怎么远程电脑
  • windows10网页打不开怎么办
  • linux回退
  • sm56hlpr.exe - sm56hlpr是什么进程
  • win8优化驱动器
  • Mac如何开启sip
  • executing c1.exe
  • itunes清理iphone垃圾
  • searchnav.exe - searchnav是什么进程 有什么用
  • linux和windows的区别?
  • win8.1如何设置
  • 完本小说 电子书地址
  • javascript日期加减
  • python的opencv
  • art+project
  • 宁波地铁支付宝可以刷吗
  • 中国的外籍
  • 自然人电子税务局网页端
  • 运满满订单取消技术服务费退还吗
  • 郑州契税怎么收
  • 开电子发票流程步骤
  • 教育培训行业的前景
  • 综合所得税包括哪些内容
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设