小程序的button组件很好用,按钮点击的时候会显示点击状态,默认的就是颜色加深
但是我们改变了button的背景色之后,就看不出点击效果了,解决起来也很简单
关键代码就是小程序的 hover-class 属性,需要注意的是,hover-class 的属性中的样式必须加 !important 不然没有不显示效果
产生该问题的原因为:在css中,内联样式 style的优先级要高于class选择器的优先级,所以在我们添加style标签后即使添加hover-class选择器也会被内联样式style所覆盖,导致hover-class选择器失效,无法实现点击按钮后的效果。
<button hover-class="hover">我要投票</button>
.voteText .hover{
background-color: #bb241c !important;
color: #f2f2f2 !important;
}
改完可以看到按钮点击的时候颜色变成了我们设置的颜色