vue 实现hover
Vue 实现 hover 效果的方法
在 Vue 中实现 hover 效果可以通过多种方式实现，以下是常见的几种方法：
使用 CSS 伪类
通过 CSS 的 :hover 伪类直接定义 hover 样式，适用于简单的 hover 效果。
<template>
<div class="hover-box">Hover me</div>
</template>
<style>
.hover-box {
width: 100px;
height: 100px;
background: #eee;
transition: background 0.3s;
}
.hover-box:hover {
background: #ccc;
}
</style>使用 Vue 的 v-on 指令
通过 @mouseenter 和 @mouseleave 事件动态切换样式或类名。
<template>
<div
@mouseenter="isHovered = true"
@mouseleave="isHovered = false"
:class="{ 'active': isHovered }"
>
Hover me
</div>
</template>
<script>
export default {
data() {
return {
isHovered: false
}
}
}
</script>
<style>
.active {
background: #ccc;
}
</style>使用 v-bind:style 动态绑定样式
通过鼠标事件动态修改内联样式。
<template>
<div
@mouseenter="hoverStyle = { background: '#ccc' }"
@mouseleave="hoverStyle = {}"
:style="hoverStyle"
>
Hover me
</div>
</template>
<script>
export default {
data() {
return {
hoverStyle: {}
}
}
}
</script>使用第三方库（如 VueUse）
VueUse 提供了 useMouse 或 useHover 等工具函数简化 hover 逻辑。
<template>
<div ref="target" :class="{ 'active': isHovered }">
Hover me
</div>
</template>
<script>
import { useHover } from '@vueuse/core'
export default {
setup() {
const target = ref(null)
const isHovered = useHover(target)
return { target, isHovered }
}
}
</script>选择建议
- 简单样式优先使用 CSS
:hover，性能最佳。 - 需要复杂逻辑时使用 Vue 事件绑定。
- 项目已引入 VueUse 时推荐使用组合式 API 方案。
