微信小程序中,可以用 hover-class 屬性來指定元素的點擊態效果。但是在在使用中要注意,大部分組件是不支持該屬性的。
目前支持 hover-class 屬性的組件有三個:view、button、navigator。
不支持 hover-class 屬性的組件,同時也不支持 hover-stop-propagation、hover-start-time、hover-stay-time 這三個屬性。
使用方法:
<view hover-class="bg_red">這是一段文字</view>
.light_blue{
background: bg_red; // 這里可以寫任何你想要的樣式
}
當 hover-class 的值為 none 時,組件上不會有任何點擊態效果。
注意事項1:
當組件中沒有任何指定的類時,直接使用 hover-class 就會起到相應的作用,但是當組件中已經指定了其他可能與 hover-class 沖突的類時,hover-class 無效。
解決辦法:
將 hover-class 指定的類放在對應 wss 文件的最末尾,這樣就不會被其他類所覆蓋。
注意事項2:
通常,當一個 view 組件中包含 image 等不支持 hover-class 的組件,但又需要在該組件上使用 hover-stop-propagation 屬性的作用時,需要將不支持 hover-class 的組件用view、button 或 navigator 包裹起來。