<div class="mouse" @mouseenter="enter" @mouseleave="leave">懸浮彈出所有參會人員<div class="hover" v-if="show">姓名姓名姓名姓名姓名姓名姓名姓名姓名</div></div> $w:100vw/1920; .mouse {position: relative;.hover {max-width: 300*$w;height: auto;position: absolute;left: 280*$w;top: -10*$w;padding: 10*$w;border: 1*$w solid #037ddc;border-radius: 8 * $w;box-sizing: border-box; &::before {content: "";position: absolute;top: 28%;left: -5 * $w;transform: rotate(45deg);rotate: -45deg;width: 10 * $w;height: 10 * $w;border: 1*$w solid #037ddc;border-top: 0;border-right: 0;background: #fff;}}}

效果圖：

?

總結

以上是生活随笔為你收集整理的vue鼠标悬浮弹窗的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。