当前位置：首页 > VUE

vue实现hover

2026-01-07 19:08:15VUE

Vue 实现 hover 效果的方法

在 Vue 中实现 hover 效果可以通过多种方式实现，包括使用 CSS、Vue 指令或事件监听。以下是几种常见的方法：

使用 CSS :hover 伪类

通过 CSS 的 :hover 伪类实现 hover 效果是最简单的方式。在 Vue 的模板中直接为元素添加类或样式，然后在 CSS 中定义 hover 状态。

<template>
  <div class="hover-box">Hover me</div>
</template>

<style>
.hover-box {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  transition: background-color 0.3s;
}

.hover-box:hover {
  background-color: #e0e0e0;
}
</style>

使用 Vue 的 `@mouseenter` 和 `@mouseleave` 事件

通过监听鼠标的 mouseenter 和 mouseleave 事件，可以动态修改元素的样式或类。

<template>
  <div
    @mouseenter="isHovered = true"
    @mouseleave="isHovered = false"
    :class="{ 'hovered': isHovered }"
  >
    Hover me
  </div>
</template>

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

<style>
.hovered {
  background-color: #e0e0e0;
}
</style>

使用 Vue 指令

可以自定义一个 Vue 指令来实现 hover 效果，适用于需要复用的场景。

<template>
  <div v-hover>Hover me</div>
</template>

<script>
export default {
  directives: {
    hover: {
      mounted(el) {
        el.addEventListener('mouseenter', () => {
          el.style.backgroundColor = '#e0e0e0'
        })
        el.addEventListener('mouseleave', () => {
          el.style.backgroundColor = '#f0f0f0'
        })
      }
    }
  }
}
</script>

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

如果需要更复杂的 hover 效果（如提示框），可以使用第三方库如 v-tooltip。

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

<script>
import { VTooltip } from 'v-tooltip'

export default {
  directives: {
    tooltip: VTooltip
  }
}
</script>

动态绑定样式

通过动态绑定样式对象，可以实现更灵活的 hover 效果。

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

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