mouseover和mouseenter闪烁的问题

<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标签中，父子元素则可以避免闪烁问题。