最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题。就是当使用@mouseenter 和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象。
重点：事件写到父元素上才行！！！ 0.0
下面写下我的实现方法和实现效果
样式代码：
<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>
其他代码：
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;
},
}
}
最终实现效果如图 当鼠标移入图片时当前图片显示查看详情：
到此这篇关于详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法的文章就介绍到这了,更多相关vue @mouseenter @mouseleave事件闪烁内容请搜索亿速云以前的文章或继续浏览下面的相关文章希望大家以后多多支持亿速云！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
