vue3 鼠标放入显示

### Vue3 中实现鼠标悬停显示元素的效果 在 Vue3 中，可以通过监听鼠标的 `mouseenter` 和 `mouseleave` 事件来控制目标元素的可见性。以下是具体实现方法： #### HTML 结构 定义一个触发器元素（如按钮）以及要展示的目标内容区域。通过绑定 Vue 的事件处理器到这些元素上，可以动态切换目标内容的显示状态。 ```html <div id="app"> <button @mouseenter="showContent" @mouseleave="hideContent">悬停查看详情</button> <div v-if="isContentVisible" class="tooltip-content"> 这里是悬浮框中的具体内容<br /> 时间: {{ currentTime }}<br /> 值: {{ value }} </div> </div> ``` 上述代码中，当鼠标进入按钮范围时调用 `showContent` 方法；离开时则调用 `hideContent` 方法[^2]。 #### JavaScript (Vue3 Composition API) 利用 Vue3 的组合式 API 来管理数据和逻辑处理函数。 ```javascript <script setup> import { ref, onMounted } from 'vue'; // 定义变量 const isContentVisible = ref(false); const currentTime = ref(new Date().toLocaleTimeString()); const value = ref('示例值'); // 更新时间的方法 function updateTime() { currentTime.value = new Date().toLocaleTimeString(); } onMounted(() => { setInterval(updateTime, 1000); // 每秒更新一次时间 }); // 控制内容显示/隐藏的方法 function showContent() { isContentVisible.value = true; } function hideContent() { isContentVisible.value = false; } </script> ``` 此脚本部分初始化了一个布尔型响应式属性 `isContentVisible` ，用来决定工具提示框 (`tooltip-content`) 是否渲染至 DOM 。同时设置了定时器每秒钟刷新当前时间并赋给 `currentTime` 变量[^1]。 #### CSS 样式 为了使弹出的内容更美观且定位合理，可加入一些基础样式设计。 ```css <style scoped> .tooltip-content { position: absolute; background-color: white; border: 1px solid black; padding: 8px; box-shadow: 2px 2px 5px rgba(0, 0, 0, .3); z-index: 999; display: none; /* 默认不可见 */ } /* 如果需要精确调整位置可以根据实际情况修改下面的选择器 */ #app button:hover + .tooltip-content, .tooltip-content.show { display: block !important; } </style> ``` 注意这里 `.tooltip-content` 初始状态下被设为 hidden （display:none），只有在其父级组件允许它显现出来的时候才会真正呈现在页面之上[^3]。 以上就是基于 Vue3 实现鼠标悬停后显示额外信息的一个简单例子。实际项目开发过程中可能还需要考虑更多细节比如动画过渡效果、多层嵌套等情况下的交互行为等等。