uni-app view hover-class 不生效

uni-app view hover-class 不生效

bug描述：

view hover-class 不生效

相关链接 ：

开发环境 版本号 项目创建方式
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 1909
HBuilderX类型
HBuilderX版本号 3.2.6
手机系统 Android
手机系统版本号 Android 11
手机厂商 华为
手机机型 HarmonyOs
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app view hover-class 不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

遇到相同问题，求官方解决

更多关于uni-app view hover-class 不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


参考：https://ask.dcloud.net.cn/question/122455

在 nvue 页面中，hover-class 属性不生效是已知问题。nvue 的渲染机制与 vue 页面不同，其样式和交互行为基于原生渲染，部分 CSS 伪类（如 :hover）可能不被支持或表现不一致。

解决方案：

  1. 使用 @touchstart 和 @touchend 事件手动模拟 hover 效果：通过绑定事件动态切换样式类。
    <template>
  <view :class="[isHover ? 'hover-class' : '']" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
    内容
  </view>
</template>
<script>
export default {
  data() {
    return {
      isHover: false
    };
  },
  methods: {
    handleTouchStart() {
      this.isHover = true;
    },
    handleTouchEnd() {
      this.isHover = false;
    }
  }
};
</script>
<style>
.hover-class {
  background-color: #f0f0f0;
}
</style>
回到顶部