After WeChat Mini Programs sets the background color to button, the style button-hover becomes invalid when clicked.

it is found that after setting the background color of Mini Program"s button component (without setting the type type), the default button-hover when clicked does not take effect. Is there any solution?


can

<button style="background:red;" hover-class="green">123</button>
.green {
  background: green !important;
}

rewrite the style of hover, the visual weight is higher than: hover pseudo-class.


I use button in WeChat Mini Programs to simulate, and then button sets opacity: 0;

<view class='contact_btn'>
    <button class='btn_contact' open-type="contact"></button>
</view>

.contact_btn {
  position: relative;
  width: 44rpx;
  height: 44rpx;
  margin-left: 10rpx;
}
.btn_contact {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
  opacity: 0;
}

have you tested this on the real mobile phone? In addition, the button you click in the development tool, check the debug tool wxml to see if button-hover is added to class when pressed. I tried to set the background color. If you don't write type, you can't see the effect under the development tool, but there is still a gray mask of that hover style on the phone

.

clipboard.png

clipboard.png

clipboard.png

Menu