<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;
}
}
}
效果图: