uni-app nvue下view没有hover效果 button的hover效果无法覆盖

uni-app nvue下view没有hover效果 button的hover效果无法覆盖

测试过的手机：

  • iOS模拟器 12 Pro max；
  • 华为P40真机；

示例代码：

<template>  
    <view>  
        <button hover-class="i-hover">点我看看hover效果</button>  
        <view style="width: 750rpx;height: 120rpx;" hover-class="i-hover">  
            <text>点我看hover效果</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  

    }  
</script>  

<style>  
    .i-hover {  
        background-color: #FF9090;  
    }  
</style>

更多关于uni-app nvue下view没有hover效果 button的hover效果无法覆盖的实战教程也可以访问 https://www.itying.com/category-93-b0.html

63 回复

问题复现后续优化，已加分，感谢您的反馈！
button的hover-class，App-nvue 平台暂不支持
view的hover-class新版已经修复，临时解决方案：nvueStyleCompiler修改为weex

更多关于uni-app nvue下view没有hover效果 button的hover效果无法覆盖的实战教程也可以访问 https://www.itying.com/category-93-b0.html


那看来需要给我加很多分，我以前的问题基本都在github

什么时候修复啊

还在修复计划之中吗

这个问题还修复的吗？

以前没注意，今天才发现这个问题，看来还是没有修复啊

button还是view？版本多少？

以及nvueStyleCompiler配置的值是什么？

回复 DCloud_UNI_GSQ: 大家应该用的都是uniapp模式。button和view应该都没有hover效果

回复 语文数学天才: view 的修复了，button的从之前就不支持

回复 DCloud_UNI_GSQ: 正式版3.3.13.20220314 此问题依旧存在，nvueStyleCompiler配置的是uniapp

回复 糯米亲爱的爸比: 具体描述一下

回复 DCloud_UNI_GSQ: 项目未开启fast启动模式、未开启纯nvue、nvueStyleCompiler配置的是uniapp 。nvue页面，view标签设置hover-class 编译成APP不生效,test.nvue如下:

<template>
<view class="root-view">

<view

class=“test1”

hover-class=“hover-test1”

<text>{{ ‘测试内容’ }}</text>

</view>
</view>
</template>
<style lang="scss">

.root-view {

flex: 1;

background-color: #f9fafc;

}

.grid-item {

width: 150rpx;

height: 150rpx;

background-color: #13c2c2;

margin-top: 10rpx;

border-radius: 20rpx;

}

.hover-test1{

background-color: #f56c6c;

}

</style>

为什么 23 年了，uniapp 编译模式下的 hover-class 还是没有效果？

那看来需要给我加很多分，我以前的问题基本都在github

怪不得我小米手机测试nvue，加在view上的 hover-class没效果，h5和小程序都有效果

在源码视图里把nvueStyleCompiler注释掉就可以用hover-class了，脑壳大

回复 xpy2019: 注释掉这个还是nvue吗

回复 语文数学天才: 是nvue，设置的是样式编译器

weex 编译模式：老模式，样式支持与普通 weex 相同 uni-app 编译模式：新模式，在 weex 原有样式基础上支持组合选择器（相邻兄弟选择器、普通兄弟选择器、子选择器、后代选择器）

用weex模式就是写法受限，这就很难受

5月份确认的 bug 现在还没修复，马上都2022了，还没修复

哈哈哈，5小时前

nPro中已经适配nvue的hover-class兼容。感谢大家的支持。

nPro插件？ 必须要用插件？ 不用插件，hover-class就无法生效？

回复 阿Zone: 不是必须用这个才行。你利用:active替代hover-class就行了。我们为内部的组件适配了一遍

老哥，怎么实现的，教教吧，求求了…

我现在 uniapp 编译模式下的，hover-class 还是不生效

01/19，nvueStyleCompiler属性为uni-app编译模式hoverl-class还是没不生效

hover-class 依然不生效，是什么原因呢？

使用:active吧

回复 语文数学天才: 使用:active 没有hover-class体验好， 使用:active 滑动列表时，很容易触发，体验不好。 去年上半年还可以用hover-class的时候，体验还是比较好的，可惜现在就是不生效。

回复 阿Zone: 可以先按置顶回复切换为旧版

预计下个alpha版本修复，修复之前可以切换回旧版模式或变通写法。

// 手动曲线hover async hover(action, startTime=50, stayTime=400) { // hover-start-time await sleep(startTime).then(() => this.menuItemHover = action) // hover-stay-time await sleep(stayTime).then(() => this.menuItemHover = ‘none’) }

老哥，这个是啥意思，没看太明白，那个 action 参数是啥？

在uni-app的nvue环境中，view组件确实不支持hover-class属性，这是由nvue的渲染机制决定的。nvue采用原生渲染，不同于vue页面的webview渲染，很多CSS特性受限。

button组件在nvue中虽然支持hover-class，但其原生样式优先级较高，需要通过更具体的选择器来覆盖：

.i-hover {
  background-color: #FF9090 !important;
}
回到顶部