Vue中鼠标悬停更换图片/文字内容，动态展示/修改某些属性

鼠标悬停时：@mouseenter 鼠标离开时：@mouseleave
利用以上来绑定相应方法，例如：

<div @mouseleave="changeImageSrc(1, '')"
@mouseenter="changeImageSrc(1, 'hover')"> //分别为鼠标悬停时和离开时绑定方法changeImageSrc，并传递参数<img :src="circle" alt="" />   //为img绑定地址 circle，在data中声明<span class="span" ref="span1">金融多头借贷反欺诈</span><div class="link-icon" ref="shape1"></div></div><div class="text"> {{text}} </div>. //为div绑定文字内容，在data中声明

data中示例：

data() {return {circle: require("@/assets/poc/circle.png"),text:'我是第一块..'};},

然后，方法中写出来你想改变的事。

 changeImageSrc (key, way) {let tempStr = way === 'hover' ? '-click' : ''  //若悬停，将“-click”后缀拼接到图片的名称里，即新图片的名称，鼠标离开则还加载旧图片let color = way === 'hover' ? '#8CF8FF' : '#FFFFFF' let opacity = way === 'hover' ? '100%' : '0'    //通过传递的参数判断是否悬停，根据需求分别定义不同值的变量switch (key) {case 1:this.circle = require(`@/assets/poc/circle${tempStr}.png`)  //换图片 （新图片的名称就是拼接后的名称）this.$refs.span1.style.color = color  //为ref绑定的文字 更改颜色this.$refs.shape1.style.opacity = opacity //为ref绑定的内容 设置透明度（设置展示与否）this.text = '我是第一块' //悬停时更改文字break}//通过传递的参数  分别让不同的部件执行不同的内容
},

完结撒花～
（悬停事件失效时，记得打开控制台看一下报什么错，可能在你不知情的情况下有什么东西未定义，就阻挡了悬停事件的发生过程

Vue中鼠标悬停更换图片/文字内容，动态展示/修改某些属性相关推荐

html页面中鼠标悬停更换图片
<img src="images/mybook.png" onmouseover="this.src='images/mybook2.png'" onmo ...
html鼠标悬浮更换图片,Vue.js鼠标悬浮更换图片功能
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 c ...
vue鼠标移动上去提示_关于如何处理vue中鼠标悬停事件的详细说明
最后,在查看结果中,发现滑过鼠标事件将触发该事件,但它将闪烁并清除. 当鼠标停留在单元格上时鼠标滑过事件,遮罩层将消失并重复出现. 开关. 为了缓解这种情况,setTimeout也用于延迟显示和隐藏在 ...
rp原型中鼠标悬停显示图片_悬停状态原型4种方式
rp原型中鼠标悬停显示图片 There are tons of options available for UX designers to prototype a user experience an ...
quill鼠标悬浮出现提示_html实现鼠标悬停显示气泡文字内容
需求描述:当鼠标悬停在一个元素上的时候,显示气泡,气泡内容可以是一段文字或图片.实现如下: html> 气泡显示 .container { margin-top: 130px; } #xszti ...
vue中鼠标悬停显示提示信息
实现效果
用vue实现，鼠标悬停放大图片，根据鼠标位置倾斜图片网页源码
大家好,今天给大家介绍一款,用vue实现的,鼠标悬停放大图片,并根据鼠标位置倾斜图片前端网页源码(图1).送给大家哦,获取方式在本文末尾. 图1 鼠标悬停放大图片,鼠标移动图片就会进行相应角度的倾斜, ...
CSS 中鼠标悬停图片旋转
CSS 中鼠标悬停图片旋转 w3school 中 transfrom 说明主要使用的属性就是 transfrom 第一种情况 1.1 说明当鼠标放到图片上之后图片旋转, 这里的图片给的是背景图 ...
css照片翻转动画（当鼠标悬停在图片上方时图片翻转）
css照片翻转动画第一次写博客也不知道怎么排版有什么建议私信我 - 鼠标悬停时图片旋转到垂直于视线的90度位置文字介绍旋转在垂直于视线的位置这是html代码 <!DOCTYPE h ...

Vue中鼠标悬停更换图片/文字内容，动态展示/修改某些属性

Vue中鼠标悬停更换图片/文字内容，动态展示/修改某些属性

Vue中鼠标悬停更换图片/文字内容，动态展示/修改某些属性相关推荐

最新文章

热门文章