vue 实现鼠标经过

鼠标悬停效果实现方法

使用 @mouseover 和 @mouseout 事件
在 Vue 模板中直接绑定鼠标事件：

<div 
  @mouseover="handleMouseOver" 
  @mouseout="handleMouseOut"
>
  悬停区域
</div>

methods: {
  handleMouseOver() {
    // 悬停时逻辑
    console.log('鼠标进入');
  },
  handleMouseOut() {
    // 离开时逻辑
    console.log('鼠标离开');
  }
}

使用 v-bind:class 动态切换样式
通过数据驱动样式变化：

<div 
  :class="{ 'hover-effect': isHovered }"
  @mouseover="isHovered = true"
  @mouseout="isHovered = false"
>
  悬停触发样式变化
</div>

data() {
  return {
    isHovered: false
  }
}

.hover-effect {
  background-color: #f0f0f0;
  transform: scale(1.05);
}

使用 CSS 原生 :hover 伪类
适合纯样式交互的场景：

<div class="hover-target">
  无需 JavaScript 的悬停效果
</div>

.hover-target:hover {
  border: 1px solid #42b983;
  transition: all 0.3s ease;
}

高级场景：悬停显示隐藏元素

结合 v-show 或 v-if
控制子元素的显示隐藏：

<div @mouseover="showTooltip = true" @mouseout="showTooltip = false">
  悬停查看提示
  <div v-show="showTooltip" class="tooltip">提示内容</div>
</div>

data() {
  return {
    showTooltip: false
  }
}

使用第三方库（如 v-tooltip）
快速实现复杂提示框：

npm install v-tooltip

import VTooltip from 'v-tooltip'
Vue.use(VTooltip)

<button v-tooltip="'这是提示内容'">悬停按钮</button>

性能优化建议

• 频繁触发的悬停事件建议使用 debounce 防抖
• 复杂动画优先使用 CSS 而非 JavaScript 实现
• 移动端设备需要额外处理 touch 事件兼容性