在uniapp中如何使用hover-class

在 uni-app 中，`hover-class` 是一种 CSS 类选择器，用于给元素添加鼠标悬停时的样式。当你希望某个元素在用户将鼠标指针移动到其上时改变样式，可以使用 `hover`伪类来实现。下面是如何在 uni-app 组件的样式中使用 `hover-class` 的步骤：

1. 首先，在组件的 `.vue` 文件的 `<style>` 标签内定义 hover 类，例如：

<template>
  <view class="my-component">
    <button @mouseenter="handleHoverEnter" @mouseleave="handleHoverLeave">点击我</button>
  </view>
</template>

<style scoped>
.my-component button {
  padding: 10px;
}

/* 定义 hover 类 */
.my-component button.hovered {
  background-color: #f5f5f5; /* 当鼠标悬停时背景颜色变浅 */
  color: red; /* 或者字体颜色变化 */
}
</style>

2. 然后在 JavaScript 里处理 hover 事件，当鼠标进入按钮时设置 `hover-class`，离开时移除：

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

const isHovering = ref(false);

function handleHoverEnter() {
  isHovering.value = true;
}

function handleHoverLeave() {
  isHovering.value = false;
}
</script>

3. 最后，在模板中通过 Vue 的 `v-bind:class` 动态绑定 `hover-class`：

<button v-bind:class="{ hovered: isHovering.value }">点击我</button>

现在，当用户鼠标悬停在按钮上时，按钮会应用`.hovered`的样式。