HTML實現點擊時的陰影(:active)(已解決iOS微信上無法使用)


一般是用這個委類:active

參考:http://www.w3school.com.cn/cssref/selector_active.asp

但是業界上實現的效果中,今日頭條的手機端網頁卻不是這樣的,當點擊時是一閃而過,也有非常漂亮的圓角,如下圖:

初步分析,沒有在css文件上找到active的樣式,我初步懷疑是用js添加上去的;且這個有個特點:點擊時是一閃1秒,而用active是一直都在,除非你放開。

最終還是沒研究出,只能用土辦法,直接active去實現。

 

接下來是發現在iOS微信上無法使用active的屬性

解決辦法:在body加入:

<body ontouchstart="" onmouseover="">
</body>

參考:

https://www.zhihu.com/question/24373267

http://stackoverflow.com/questions/8330559/hover-effects-using-css3-touch-events


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM