大家好，我想知道如何使用@mouseenter和@mouseleave来控制下拉内容，而不是让它消失
<div class="wrapper"> <div class="link" @mouseenter="show = true" @mouseleave="show = false">项目</div> <div class="content" v-if="show">这是一个内容</div> </div>
我尝试了这样的方式，但当我想要悬停在内容上或与其交互时，我不知道如何处理，希望你们能帮助我。提前谢谢。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1
952
收藏
尝试将
@mouseleave事件移到content中：new Vue({ el: "#app", data: { show: false, links: [1,2,3,4,5], linkId: null }, }).wrapper{ display: grid; justify-content: start; width: 200px; }<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="wrapper" @mouseleave="linkId = null"> <ul> <li v-for="link in links" :key="link"> <div class="link" @mouseenter.prevent="linkId = link" >Item{{ link }}</div> <div class="content" v-if="link === linkId" @mouseleave.prevent="linkId = null">这是一个内容</div> </li> </ul> </div> </div>