【css】vue 鼠标移入移出 更改图片 @mouseover @mouseout @mouseenter @mouseleave 区别

@mouseover @mouseout @mouseenter @mouseleave 区别

不干扰到子元素

mouseenter：当鼠标移入某元素时触发。鼠标只要在元素内就不再触发。不干扰到子元素
mouseleave：当鼠标移出某元素时触发。只是移出时触发一次；

会干扰到子元素

mouseover：当鼠标移入某元素，移入和移出其子元素时触发。鼠标在元素内移动，只要鼠标不断在其子元素间划来划去就会不断触发。
mouseout：当鼠标移出某元素，移入和移出其子元素时触发。鼠标在元素内移动，只要鼠标不断在其子元素间划来划去就会不断触发。

mousemove：鼠标在某元素上移动时触发，不管是不是在其子元素上移动。

鼠标悬停，图片改变

template

 <div class="hoverbox" @mouseover="changeIndex(1)" @mouseout="changeIndexBack(1)">    
    <img src="../assets/img/adv_1.png" alt="" v-show="!showimg1" />
    <img src="../assets/img/adv_a1.png" alt="" v-show="showimg1" />
 </div>

js

export default {
  data() {
	   return {
	   		showimg1:false,
	     	 showimg2:false,
	   }
  },
    methods: {
    	 //  移入
	    changeIndex(e){
	        this[`showimg${e}`] = true;
	    },
	    // 移出
	    changeIndexBack(e){
	        this[`showimg${e}`] = false;
	    },
    }
  
}