1、 核心代码展示

html
        <img class="container3_p1_1" id="container3_p1_1_0" src="./imgs/container3-img-1_qt.png" alt="" @mouseenter="hover" @mouseout="unhover" />


css部分 
  .container3_p1_1{
        position: absolute;
        left: 16.92%;
        right: 53.85%;
        top: 47.11%;
        bottom: 52.77%;
       display: block;
      }




js部分 
// 需要将图片require 引入才行   不然引入的是字符串 不能展示出来
const img1 = require('./imgs/container3-img_zhongzhi.png')
const img2 = require('./imgs/container3-img-1_qt.png')


methods: {
    // 注意这个地方 需要使用 elem.target.src
    // 直接elem.src 不能获取到 可以打印出来 很明确
    hover(elem) {
      // console.log(elem.target)
      elem.target.src = img1
      // elem.setAttribute('src', './imgs/container3-img_zhongzhi.png');
      // console.log("函数执行")


    },
    unhover(elem) {
      // elem.setAttribute('src', './imgs/container3-img-1_qt.png');
      elem.target.src = img2
      // console.log('TS')

    }

  }

2、实现效果

• 鼠标移上去

• 鼠标移动开

3、思路展示

1、先在html 中绑定事件
2、js 对两个事件分别绑定不同的src 

• 打印出来是这样的

• 这个就是指定标签元素

4、 大功告成！