Vue如何实现鼠标悬浮切换图片
导读：本文共1296字符，通常情况下阅读需要4分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 需求：1. 鼠标悬浮到图示按钮上面，图片切换成灰色按钮2. 鼠标离开图示按钮，图片切换成回白色按钮Html部分：<!--如果此处的两个鼠标事件不生效，可以在mouseenter后面添加.native后缀--><divclass="left-btn"@click="saveTemplate()"@mo... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。需求：
1. 鼠标悬浮到图示按钮上面，图片切换成灰色按钮
2. 鼠标离开图示按钮，图片切换成回白色按钮
Html部分：
<!--如果此处的两个鼠标事件不生效，可以在mouseenter后面添加.native后缀--><divclass="left-btn"@click="saveTemplate()"@mouseenter="changeImageSrc(1,'hover')"@mouseleave="changeImageSrc(1,'')"><img:src="saveTemplateSrc"class="left-btn-img"alt=""><spanclass="left-btn-text">保存模板</span></div><divclass="left-btn"@click="deleteSelectStock()"@mouseenter="changeImageSrc(2,'hover')"@mouseleave="changeImageSrc(2,'')"><img:src="deleteSelectStockSrc"class="left-btn-img"alt=""><spanclass="left-btn-text">删除选中行</span></div><divclass="left-btn"@click="deleteTableData()"@mouseenter="changeImageSrc(3,'hover')"@mouseleave="changeImageSrc(3,'')"><img:src="deleteTableDataSrc"class="left-btn-img"alt=""><spanclass="left-btn-text">清空当前表格</span></div>
Js部分：
//在data中先定义图片的初始srcsaveTemplateSrc:require("@/assets/dataBrowser/saveTemplate.png"),deleteSelectStockSrc:require("@/assets/dataBrowser/deleteSelectedRow.png"),deleteTableDataSrc:require("@/assets/dataBrowser/clearCurrentList.png")//在methods中绑定鼠标悬浮事件changeImageSrc(key,way){lettempStr=way==='hover'?'Hover':''switch(key){case1:this.saveTemplateSrc=require(`@/assets/dataBrowser/saveTemplate${tempStr}.png`)breakcase2:this.deleteSelectStockSrc=require(`@/assets/dataBrowser/deleteSelectedRow${tempStr}.png`)breakcase3:this.deleteTableDataSrc=require(`@/assets/dataBrowser/clearCurrentList${tempStr}.png`)break}} </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
Vue如何实现鼠标悬浮切换图片的详细内容，希望对您有所帮助，信息来源于网络。