vue鼠标悬停出现悬浮框

最新推荐文章于 2025-03-08 09:18:49 发布

rta_bh

最新推荐文章于 2025-03-08 09:18:49 发布

阅读量6.6k

点赞数 2

分类专栏： vue 文章标签： 1024程序员节 vue vue.js

本文链接：https://blog.youkuaiyun.com/rta_bh/article/details/109260463

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了在电商网站主页中，如何使用Vue实现鼠标悬停到a标签上显示下拉框，并在鼠标离开后下拉框消失的效果。通过监听mouseenter和mouseleave事件，结合CSS控制下拉框的显示与隐藏，实现了一个简洁的解决方案。同时，文中也探讨了其他可能的实现方式，如使用v-if和延迟判断等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前遇到一个需求，电商主页中鼠标悬停到某个a标签上面，下面就会出现一个div框，里面有各种选项。这里的主要问题是，如何做到鼠标悬停出现下拉框，并且鼠标移走下拉框和标签后下拉框消失。网上有很多做法，有的是使用v-if判断做的（不靠谱），有的是说延迟几毫秒后判断是否在div框上，如果在，则不消失，如果不在，则消失（有点麻烦）。后来我又测试了几个最终我认为还不错又简单的（之前都想的太复杂，原谅我的无知），上代码。

创建一个vue文件把大概模板（具体模板我就不写了）弄好之后写两个同级div,其中一个为标签，另一个为下拉框。

<div class="link" @mouseenter="enter" @mouseleave="leave">移入鼠标悬浮</div>
<div class="suspendiv" @mouseover="mouseover" @mouseleave="leave">这里是悬浮的框</div>

css样式（下拉框）

.suspendiv{
        width: 100px;
        height: 100px;
        display: none;
        position: absolute;
        border: 1px solid #cccccc;
    }

vue实例中methods写三个方法

enter: function() {
    $(".suspendiv").css('display', 'block')
},
leave: function () {
    $(".suspendiv").css('display', 'none')
},
mouseover:function () {
    $(".suspendiv").css('display', 'block')
}

是不是很简单。有没有更优的方法还请赐教。