vue used @mouseenter and @mouseleave event flicker problem solving method in a loop

Recently achieved in the project when the mouse is moved hide encountered a small problem when the current picture needs another display pictures in circulation out of the picture. That is, when @mouseenter and @mouseleave events to achieve this demand, we noticed that the mouse moved into the picture flicker.

---

Key: Event writes for the job on the parent element! ! ! 0.0

I wrote the following implementation methods and achieve results

Style Code:

<div class="imgs" v-for="(item,index) in exampleUrl" :key = index  @mouseenter ="enterFun(index)" @mouseleave ="leaveFun(index)" >                     
        <img :src = item.url  v-show="show ||  n != index" >                               
        <div   v-show="!show  && n == index" >查看详情</div>
</div>

Other codes:

export default {
	data () {
	    return {
	        n: 0,
	        show:true,
	    }
	} ,
	methods: {
		enterFun(index){
		    console.log('鼠标移入');
		    this.show = false;
		    this.n = index;
		},
		leaveFun(index){
		    console.log('鼠标离开');
		    this.show = true;
		    this.n = index;
		},
	}       
}

And ultimately the effect is shown when the mouse is moved into the picture for the current picture shows View details: