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

这篇具有很好参考价值的文章主要介绍了【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文章来源地址https://www.toymoban.com/news/detail-585908.html

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