vue鼠标悬停出现悬浮框

之前遇到一个需求，电商主页中鼠标悬停到某个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')
}

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