背景描述

最近写前端页面，要求是实现鼠标放在图片上，变为另一个图片。对于前端大佬可能很容易实现，我属于菜鸟级别，写的不好大佬们勿喷。

直接上代码

方法一

<template>
    <div class="img-unit" v-for="(item, index) in imageList" :key="index" :value="index">
        <div class="imageview" :style="{
          '--bg': `url(${item.enterpriseGreyImg}) no-repeat`,
          '--bgHover': `url(${item.enterpriseColorImg}) no-repeat`,
        }"
      ></div>
    </div>
</template>

**这里图片接连是网图，自己提替换**
data() {
    return {
      imageList: [
                     {
                        enterpriseGreyImg:'https://xxx.xxxx.png',
                        enterpriseColorImg:'https://xxx.xxxx.png'
                      }
                  ],
    };
  },

//样式
<style lang="less" scoped>
.img-unit {
  width: 100px;
  display: inline-block;
  box-shadow: 0 2px 12px 0 #ddd;
  .imageview {
    width: 100px;
    height: 100px;
    background: var(--bg);
    background-size: 100%;
    &:hover {
      background: var(--bgHover);
      background-size: 100%;
    }
  }
}
</style>

方法二

<template>
  <div class="top-content">
    <div
      v-for="(item, index) in imageList"
      :key="item"
      :value="index"
      class="img-unit"
    >
      <img
        class="imageview"
        :src="dealImag(item, index)"
        @mouseout="moveOtherClick(item, index)"
        @mouseover="moveClick(item, index)"
      />
    </div>
  </div>
</template>

**这里图片接连是网图，自己提替换**
data() {
    return {
      imageList: [
                     {
                        iconname:'https://xxx.xxxx.png',
                        imagename:'https://xxx.xxxx.png'
                      }
                  ],
    };
  },
  methods: {
    moveClick(item, index) {
      // item.imagename = item.iconname;
      console.log("---1--", index);
      item.isLeave = true;
    },
    moveOtherClick(item, index) {
      // item.imagename = item.iconname;
      console.log("--2---", index);
      item.isLeave = false;
    },

    dealImag(item, index) {
      if (item.isLeave == true) {
        return item.iconname;
      } else {
        return item.imagename;
      }
    },
  },

//样式
<style lang="less" scoped>
.top-content {
  background-color: yellow;
  display: flex;

  .img-unit {
    background-color: antiquewhite;
    width: 120px;
    height: 120px;
    margin-right: 10px;
    .imageview {
      width: 100px;
      height: 100px;
    }
  }
  .imageview {
    width: 100px;
    height: 100px;
  }
}
</style>

效果可以直接复制代码后运行查看，