当前位置：首页 > VUE

vue 实现hover

2026-03-07 15:57:05VUE

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 逻辑。

vue 实现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>