当前位置：首页 > VUE

vue实现hover

2026-03-07 03:22:12VUE

Vue 实现 hover 效果的方法

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

使用 CSS 伪类

最直接的方式是利用 CSS 的 :hover 伪类，无需额外 JavaScript 代码。

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

<style>
.hover-element {
  background-color: #fff;
  transition: background-color 0.3s;
}
.hover-element:hover {
  background-color: #f0f0f0;
}
</style>

使用 Vue 事件监听

通过 @mouseenter 和 @mouseleave 事件动态切换样式或类名。

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

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

<style>
.active-hover {
  background-color: #f0f0f0;
}
</style>

使用 v-bind 动态绑定样式

通过绑定内联样式实现 hover 效果。

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

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

使用第三方库（如 VueUse）

对于更复杂的交互，可以使用 @vueuse/core 的 useMouse 或自定义指令。

vue实现hover

<template>
  <div v-hover="handleHover">Hover me</div>
</template>

<script>
export default {
  directives: {
    hover: {
      mounted(el, binding) {
        el.addEventListener('mouseenter', () => binding.value(true));
        el.addEventListener('mouseleave', () => binding.value(false));
      }
    }
  },
  methods: {
    handleHover(isHovering) {
      console.log(isHovering ? 'Hovering' : 'Not hovering');
    }
  }
}
</script>