当前位置：首页 > VUE

vue 实现鼠标经过

2026-02-11 08:59:35VUE

鼠标悬停效果实现方法

在Vue中实现鼠标悬停（hover）效果可以通过多种方式完成，以下为几种常见方法：

方法1：使用v-on指令绑定mouseover和mouseout事件

<template>
  <div 
    @mouseover="isHovered = true"
    @mouseout="isHovered = false"
    :style="{ backgroundColor: isHovered ? 'lightblue' : 'white' }"
  >
    悬停区域
  </div>
</template>

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

方法2：使用CSS伪类:hover

<template>
  <div class="hover-box">
    悬停区域
  </div>
</template>

<style>
.hover-box {
  background-color: white;
  transition: background-color 0.3s;
}
.hover-box:hover {
  background-color: lightblue;
}
</style>

方法3：使用v-show/v-if控制显示

<template>
  <div @mouseenter="showTooltip = true" @mouseleave="showTooltip = false">
    悬停触发区域
    <div v-show="showTooltip">提示内容</div>
  </div>
</template>

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

高级应用场景

动态类名绑定

<template>
  <div 
    :class="{ 'active': isHovered }"
    @mouseenter="isHovered = true"
    @mouseleave="isHovered = false"
  >
    悬停元素
  </div>
</template>

<style>
.active {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>

组件封装

vue 实现鼠标经过

<template>
  <HoverEffect>
    <template #default="{ hover }">
      <div :class="{ 'hover-effect': hover }">
        悬停内容
      </div>
    </template>
  </HoverEffect>
</template>

<script>
import HoverEffect from './HoverEffect.vue'

export default {
  components: { HoverEffect }
}
</script>