vue鼠标滑过显示隐藏层

Vue鼠标经过显示隐藏层

鼠标经过

 @mouseenter="buttonopen"//(buttonopen自定义方法)

鼠标离开

@mouseleave="buttonexit"

样式控制

<div style="display:none" id="typediv1“></div>

var timer= document.getElementById("typediv1")

timer.style.display=''

完整代码

<template>
<!--控制方-->
 <button  @mouseenter="buttonopen"  @mouseleave="buttonexit">show</button>
<!--被控制方-->
<!--此处加@mouseenter="buttonopen"  @mouseleave="buttonexit"即经过隐藏框后其依就显示-->
 <div style="display:none" id="typediv1" class="text" @mouseenter="buttonopen"  @mouseleave="buttonexit">

​    <h1 >测试</h1>

​    <button @click="buttonnext">测试二</button>

 </div>

</template>

<script setup>

const buttonopen=()=>{

var timer= document.getElementById("typediv1")
//使其可见
timer.style.display=''

}

const buttonexit=()=>{

var timer= document.getElementById("typediv1")
//使其不可见
timer.style.display='none'

}

const buttonnext=()=>{

console.log('完成测试')

}

</script>

<style>

.text{

​    border-style: solid;

}

</style>

图片展示