效果:默认状态下图标为蓝色的;鼠标移入后图标变为白色的。
资源需要:此方法需要 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 - 在下_大猫

Logo

前往低代码交流专区

更多推荐