当前位置：首页 > VUE

vue怎么实现hover效果

2026-02-22 17:57:55VUE

使用CSS实现hover效果

在Vue中可以通过CSS的:hover伪类直接实现hover效果。这种方法适用于简单的样式变化，无需额外逻辑。

<template>
  <button class="hover-button">Hover Me</button>
</template>

<style>
.hover-button {
  background-color: #42b983;
  transition: background-color 0.3s;
}
.hover-button:hover {
  background-color: #35495e;
}
</style>

使用v-bind和动态class

通过Vue的响应式特性，可以结合鼠标事件动态切换class或style。

<template>
  <button 
    @mouseover="isHovered = true"
    @mouseleave="isHovered = false"
    :class="{ 'active': isHovered }"
  >
    Hover Me
  </button>
</template>

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

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

使用v-show/v-if控制元素显示

hover时显示隐藏元素可以通过条件渲染实现。

<template>
  <div 
    @mouseover="showTooltip = true"
    @mouseleave="showTooltip = false"
  >
    <span>Hover here</span>
    <div v-show="showTooltip" class="tooltip">Tooltip content</div>
  </div>
</template>

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

使用第三方库

对于复杂动画效果，可以集成第三方库如Animate.css或GSAP。

<template>
  <button
    @mouseover="addAnimation"
    @mouseleave="removeAnimation"
    class="animated"
    ref="btn"
  >
    Bounce on Hover
  </button>
</template>

<script>
import 'animate.css'
export default {
  methods: {
    addAnimation() {
      this.$refs.btn.classList.add('bounce')
    },
    removeAnimation() {
      this.$refs.btn.classList.remove('bounce')
    }
  }
}
</script>

组合式API实现

在Vue3中可以使用组合式API封装hover逻辑。

vue怎么实现hover效果

<template>
  <button v-hover="'scale-105'">Hover Me</button>
</template>

<script setup>
const vHover = {
  mounted(el, binding) {
    el.addEventListener('mouseenter', () => {
      el.classList.add(binding.value)
    })
    el.addEventListener('mouseleave', () => {
      el.classList.remove(binding.value)
    })
  }
}
</script>

<style>
.scale-105 {
  transform: scale(1.05);
  transition: transform 0.2s;
}
</style>