当前位置：首页 > VUE

Vue实现鼠标悬浮

2026-03-09 19:51:57VUE

Vue 实现鼠标悬浮效果的方法

使用 v-on 指令监听鼠标事件

通过 v-on（或简写为 @）指令监听 mouseenter 和 mouseleave 事件，动态修改数据属性来控制悬浮效果。

<template>
  <div 
    @mouseenter="isHovered = true" 
    @mouseleave="isHovered = false"
    :style="{ backgroundColor: isHovered ? 'lightblue' : 'white' }"
  >
    鼠标悬浮区域
  </div>
</template>

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

使用 CSS 类名绑定

通过 v-bind:class（或简写为 :class）动态切换类名，结合 CSS 定义悬浮样式。

<template>
  <div 
    @mouseenter="isHovered = true" 
    @mouseleave="isHovered = false"
    :class="{ 'hover-effect': isHovered }"
  >
    鼠标悬浮区域
  </div>
</template>

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

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

使用纯 CSS 实现

如果不需要逻辑处理，可以直接用 CSS 的 :hover 伪类实现悬浮效果，无需 Vue 代码干预。

<template>
  <div class="hover-target">
    鼠标悬浮区域
  </div>
</template>

<style>
.hover-target:hover {
  background-color: lightblue;
}
</style>

封装悬浮逻辑为自定义指令

对于复用场景，可以封装一个自定义指令 v-hover，统一处理悬浮逻辑。

// main.js 或单独指令文件
Vue.directive('hover', {
  bind(el, binding) {
    el.addEventListener('mouseenter', () => {
      binding.value(true);
    });
    el.addEventListener('mouseleave', () => {
      binding.value(false);
    });
  }
});

// 组件中使用
<template>
  <div v-hover="handleHover" :class="{ 'active': hoverState }">
    悬浮区域
  </div>
</template>

<script>
export default {
  data() {
    return {
      hoverState: false
    }
  },
  methods: {
    handleHover(state) {
      this.hoverState = state;
    }
  }
}
</script>

高级应用：悬浮显示隐藏元素

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

Vue实现鼠标悬浮

<template>
  <div @mouseenter="showTooltip = true" @mouseleave="showTooltip = false">
    主内容
    <div v-show="showTooltip" class="tooltip">提示信息</div>
  </div>
</template>

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

<style>
.tooltip {
  position: absolute;
  background: #333;
  color: white;
  padding: 5px;
  border-radius: 4px;
}
</style>