当前位置：首页 > VUE

vue实现hovuer

2026-03-27 20:20:21VUE

Vue 实现 Hover 效果的方法

在 Vue 中实现 hover 效果可以通过多种方式实现，以下是几种常见的方法：

使用 CSS 伪类

通过 CSS 的 :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 的事件绑定

通过 @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>

使用第三方库（如 VueUse）

对于更高级的交互需求，可以使用 @vueuse/core 提供的 useMouse 或 useHover 工具。

<template>
  <div ref="target" :class="{ 'hovered': 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>

<style>
.hovered {
  background: #ccc;
}
</style>

动态绑定内联样式

通过 :style 动态绑定内联样式，适用于需要动态计算样式的场景。

vue实现hovuer

<template>
  <div 
    @mouseenter="hoverStyle = { background: '#ccc' }"
    @mouseleave="hoverStyle = {}"
    :style="hoverStyle"
  >
    Hover me
  </div>
</template>

<script>
export default {
  data() {
    return {
      hoverStyle: {}
    }
  }
}
</script>