当前位置:   article > 正文

微信小程序按钮点击时的样式hover-class=“hover“

微信小程序按钮点击时的样式hover-class=“hover“

小程序的button组件很好用,按钮点击的时候会显示点击状态,默认的就是颜色加深

但是我们改变了button的背景色之后,就看不出点击效果了,解决起来也很简单

关键代码就是小程序的 hover-class 属性,需要注意的是,hover-class 的属性中的样式必须加 !important 不然没有不显示效果

产生该问题的原因为:在css中,内联样式 style的优先级要高于class选择器的优先级,所以在我们添加style标签后即使添加hover-class选择器也会被内联样式style所覆盖,导致hover-class选择器失效,无法实现点击按钮后的效果。

 <button hover-class="hover">我要投票</button>
  1. .voteText .hover{
  2. background-color: #bb241c !important;
  3. color: #f2f2f2 !important;
  4. }

改完可以看到按钮点击的时候颜色变成了我们设置的颜色

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/489723
推荐阅读
相关标签
  

闽ICP备14008679号