<a href="javascript:;" >
<div class="img-box" @mouseenter="showLook" @mouseleave="hideLook">
<img src="@/assets/images/cla1.png">
</div>
<div class="look" v-if="show">
<img src="@/assets/images/guankan.png">
</div>
<p class="tit">Java无锁并发一课通关</p>
<div class="btm">
<span>815人报名</span>
<span>5.0分</span>
</div>
</a>
export default {
name: "cla",
data(){
return {
show:false
}
},
methods:{
showLook(){
this.show=true;
},
hideLook(){
this.show=false;
}
}
}
当前需求为默认.look div不显示当鼠标移入.img-box div中look显示,鼠标移出look隐藏。 因为img-box和look是兄弟元素,所以给look添加样式pointer-events: none;这样避免look闪烁。 如果@mouseenter="showLook" @mouseleave="hideLook"放在a标签中,父子元素则可以避免闪烁问题。