小程式的按鈕按下去的樣式（button-hover）為啥不起作用？

多重閱讀發表於2018-07-10

微信小程式的button中，可以指定按下去的類名，例如：

<button hover-class="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;
}

相關文章