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

原创已于 2023-04-21 17:50:30 修改 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css #前端

于 2022-09-21 16:07:32 首次发布

css 专栏收录该内容

5 篇文章

订阅专栏

本文详细解析了mouseenter、mouseleave、mouseover及mouseout等鼠标事件的区别，并通过实例展示了如何使用这些事件实现图片悬停效果的变化。

@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>

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