vue 实现hover事件

Vue 实现 hover 事件的方法

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

使用 CSS 伪类

通过 CSS 的 :hover 伪类直接实现 hover 效果，无需 JavaScript 逻辑：

<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"
    :style="{ background: isHovered ? '#ccc' : '#eee' }"
  >
    Hover me
  </div>
</template>

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

使用 CSS Modules 或 Scoped 样式

结合 Vue 的 scoped 样式和 CSS 类名动态切换：

<template>
  <div 
    @mouseenter="hoverClass = 'active'"
    @mouseleave="hoverClass = ''"
    :class="['box', hoverClass]"
  >
    Hover me
  </div>
</template>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  background: #eee;
}
.box.active {
  background: #ccc;
}
</style>

使用第三方库（如 v-tooltip）

对于复杂 hover 交互（如提示框），可使用专门库：

<template>
  <button v-tooltip="'Hover tip content'">Hover me</button>
</template>

<script>
import VTooltip from 'v-tooltip'
export default {
  directives: {
    tooltip: VTooltip.VTooltip
  }
}
</script>

注意事项

• 性能：CSS 伪类性能优于 JavaScript 事件，优先考虑纯 CSS 方案。
• 移动端适配：移动设备无 hover 事件，需通过 @touchstart 等事件补充交互。
• 过渡动画：使用 transition 或 Vue 的 <transition> 组件增强 hover 动效。