vue3 鼠标悬停变色代码

在 Vue.js 3 中，你可以使用 CSS 和 v-bind:class 绑定来实现在鼠标悬停时元素颜色的变化。首先，你需要在CSS中定义一个基础样式和一个hover状态下的伪类：

/* 基础样式 */
.my-element {
  color: initial; /* 或者你想设置的颜色，如：color: black; */
}

/* 鼠标悬停时的样式 */
.my-element:hover {
  color: red; /* 可以改变为任何你想要的颜色，例如红色 */
}

然后，在Vue组件的模板中，给需要添加这个效果的元素绑定`v-bind:class`，传入一个对象，键是类名，值是一个计算属性，判断鼠标是否悬停：

<template>
  <div :class="{'my-element': true, 'hover-effect': isHovered}">
    <!-- 元素内容 -->
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isHovered = ref(false);

function updateHoverState(event) {
  if (event.target === event.currentTarget) {
    isHovered.value = event.type === 'mouseover';
  }
}

export default {
  mounted() {
    this.$el.addEventListener('mouseenter', updateHoverState);
    this.$el.addEventListener('mouseleave', updateHoverState);
  },
  beforeUnmount() {
    this.$el.removeEventListener('mouseenter', updateHoverState);
    this.$el.removeEventListener('mouseleave', updateHoverState);
  },
};
</script>

在这个例子中，当鼠标进入元素时，`isHovered`会被设为`true`，应用`.hover-effect`类，颜色变为红色；离开元素时恢复初始颜色。