小程序的按钮按下去的样式(button-hover)为啥不起作用?

微信小程序的button中,可以指定按下去的类名,例如:


默认的类名就是 button-hover,因此上面的类名定义可以省略。

根据官方开发文档,在wxss中定义类名样式,就可以自定义按钮按下去的样式。但是我在开发中,发现直接这样写没有效果:

.button-hover {
  background-color: grey;
}

检查下来发现原因是,button已经自定义了背景色,样式选择权重有影响,button的样式如下:

.wrap button {
  background-color: green;
}

因此把hover选择器修改一下就可以了:

.wrap button.button-hover {
  background-color: grey;
}

你可能感兴趣的