uni-app hover-class "tabBar":{"position":"top",} 组件在h5页面不生效 小程序生效

uni-app hover-class “tabBar”:{“position”:“top”,} 组件在h5页面不生效 小程序生效

开发环境 版本号 项目创建方式
Windows 10 专业版 HBuilderX 
产品分类：uniapp/H5

浏览器平台：Chrome
浏览器版本：94.0.4606.81（正式版本） （32 位）

## 示例代码：

```html
<template>
<view class="box2"  hover-class="box2-active" hover-stop-propagation="">
<view class="box" hover-class="box-active" hover-stop-propagation="">我是一个大盒子</view>
</view>
</template>
<style>
.box{
width:200px;
height:200px;
background:#333333;
}
.box-active{
    background:#DD524D;  
}  
 .box2{
     width:300px;  
     height:300px;  
     background:#4CD964;  
 }
 .box2-active{
     background:#007AFF;  
 }
</style>

操作步骤：

<style>
.box{
width:200px;
height:200px;
background:#333333;  
}
.box-active{
    background:#DD524D;  
}  
 .box2{
     width:300px;  
     height:300px;  
     background:#4CD964;  
 }
 .box2-active{
     background:#007AFF;  
 }
</style>

预期结果：

hover-clas 在h5页面应该点击变色

实际结果：

hover-clas 在h5页面不生效 小程序生效

bug描述：

在PC 页面组件全都不管用 并且 我和同事同个环境 在他电脑上执行同样代码就生效


更多关于uni-app hover-class "tabBar":{"position":"top",} 组件在h5页面不生效 小程序生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app hover-class "tabBar":{"position":"top",} 组件在h5页面不生效 小程序生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在H5平台，hover-class 默认不生效，因为H5没有触摸事件。你需要手动开启H5平台的hover-class支持。

在 pages.json 中，为对应页面或全局配置 "hoverClass": true：

{
  "globalStyle": {
    "h5": {
      "hoverClass": true
    }
  }
}

或者针对单个页面配置：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "h5": {
          "hoverClass": true
        }
      }
    }
  ]
}
回到顶部