[随笔] Vue中鼠标移入/移出事件——修改图片图标颜色(修改src地址)
效果:默认状态下图标为蓝色的;鼠标移入后图标变为白色的。Html 部分:<!-- 如果此处的两个鼠标事件不生效,可以在 mouseenter和 mouseleave后面添加.native后缀 --><router-link to="./detail1" class="standard-itemBox" @mouseenter.native="changeImageSrc...
·
效果:默认状态下图标为蓝色的;鼠标移入后图标变为白色的。
资源需要:此方法需要 2款 不同状态对应的图标文件,可以考虑使用svg图片、阿里字体图标。
Html 部分:
<!-- 如果此处的两个鼠标事件不生效,可以在 mouseenter和 mouseleave后面添加.native后缀 -->
<router-link to="./detail1" class="standard-itemBox" @mouseenter.native="changeImageSrc(1, 'hover')" @mouseleave.native="changeImageSrc(1, '')">
<img :src="staImg1">
<span>项目1</span>
</router-link>
<router-link to="./detail2" class="standard-itemBox" @mouseenter.native="changeImageSrc(2, 'hover')" @mouseleave.native="changeImageSrc(2, '')">
<img :src="staImg2">
<span>项目2</span>
</router-link>
<!-- 可以继续添加项 -->
Js 部分:
changeImageSrc (key, way) {
// console.log('鼠标移入/移出')
// 移入或移出时图标src 名后缀变化('_h'表示移入状态;默认状态后缀为空'')
let tempStr = way === 'hover' ? '_h' : ''
switch (key) {
case 1:
this.staImg1 = require(`@/../static/img/logo_home_standard1${tempStr}.png`)
break
case 2:
this.staImg2 = require(`@/../static/img/logo_home_standard2${tempStr}.png`)
break
//可以继续添加
}
},
方法参考: CSDN - 在下_大猫
更多推荐
已为社区贡献2条内容
所有评论(0)