vuejs 鼠标滑入和滑出img标签时改变其src属性失败

Question

1.有三个img图标，要做成鼠标滑上去和滑出时图标改变的效果
2.现在滑上去图标可以变，但鼠标滑出时不会变回去,其实就是两张图片在切换

感觉是没有触发鼠标滑出的事件，不确定是不是这样

html:

<div class="gap-icon">
                <img :src="pic1" @mouseover="pic1 = pic11" @mouseout="pic11 = pic1"/>
                <img :src="pic2" @mouseover="pic2 = pic22" @mouseout="pic22 = pic2"/>
                <img :src="pic3" />
            </div>

script:

<script>
    export default {
      name: 'download',
      data () {
        return {
          downbanner: '/static/img/down/banner.png',
          more: '/static/img/down/more.png',
          title: '/static/img/down/title.png',
          public: '/static/img/down/public.png',
          pic1: '/static/img/down/xz.png',
          pic2: '/static/img/down/cy.png',
          pic3: '/static/img/down/bd.png',
          pic11: '/static/img/down/xz1.png',
          pic22: '/static/img/down/cy1.png',
          pic33: '/static/img/down/bd1.png'
        }
      }
    }
</script>

Answer 1

<div class="gap-icon">

<img :src="pic1" @mouseover="pic1 = pic11" @mouseout="pic1 = pic111"/>
<img :src="pic2" @mouseover="pic2 = pic22" @mouseout="pic2 = pic222"/>
<img :src="pic3" />

</div>

<script>

export default {
  name: 'download',
  data () {
    return {
      downbanner: '/static/img/down/banner.png',
      more: '/static/img/down/more.png',
      title: '/static/img/down/title.png',
      public: '/static/img/down/public.png',
      pic1: '/static/img/down/xz.png',
      pic2: '/static/img/down/cy.png',
      pic11: '/static/img/down/xz.png',
      pic22: '/static/img/down/cy.png',
      pic3: '/static/img/down/bd.png',
      pic111: '/static/img/down/xz1.png',
      pic222: '/static/img/down/cy1.png',
      pic33: '/static/img/down/bd1.png'
    }
  }
}

</script>
这样应该可以了。
= 赋值的问题多注意就好。

Answer 2

moveover的时候pic1被你赋值为pic11了
程序确实是一直在执行的 但是值都一样了你还咋能看出切换效果呢

Answer 3

。。这个@mouseout="pic11 = pic1"是什么逻辑。。
你的img元素加载的是pic1变量的路径，然后你这里的@mouseover事件已经把pic1变量污染了，找不到最开始的那个路径了。
你需要3个变量来完成这个操作，一个是用来渲染在:src="pic1"内，一个是用来保存初始图片路径，一个是用来保存hover图片路径。

Answer 4

这个相当于这个 a=1; b=2;
鼠标移入： a=b; 此时：a=2;b=2;
鼠标移出： b=a; 此时：a=2;b=2;
所以图片没有变化

Answer 5

@mouseover="pic1 = pic11" @mouseout="pic11 = pic1"
这块赋值除了问题O__O "…

<img :src="p1" @mouseover="p1 = pic11" @mouseout="p1 = pic1"/>
{
p1: '/static/img/down/xz.png',
pic1: '/static/img/down/xz.png',
pic11: '/static/img/down/xz1.png'
}

Answer 6

pic1 = pic11赋值是对的，而pic11 = pic1中之前pic1已经等于pic11了,你这样赋值当然不会变，而且pic11 = pic1是把pic1赋值给pic11,pic1本身是没有变的
还有我觉得这样的效果应该用样式的:hover 去实现

Answer 7

css可以实现吧？

Answer 8

换成mouseleave试试，