標籤：
web開發過程中，移動端按鈕互動效果，點擊按鈕變色
<!doctype html><html><head> <meta charset="utf-8"> <script type="text/javascript"> document.body.addEventListener(‘touchstart‘, function () {}); </script> <style> .btn{ font-size: 1.5em; line-height: 2em; text-align: center; color: #fff; background: #ce4f54; width: 200px; } .btn:hover, .btn:active, .btn:focus{ background: #043d5d; } </style> <title>無標題文檔</title></head><body> <div class="btn">測試Test</div></body></html>
如果不綁定事件，在pc和安卓上可以實現
綁定事件為了在ios中生效;
使用css3屬性實現緩互動
<!doctype html><html><head> <meta charset="utf-8"> <style> .btn{ font-size: 1.5em; line-height: 2em; text-align: center; color: #fff; background: #ce4f54; width: 200px; transition: 0.5s all; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; } .btn:hover, .btn:active{ background: #043d5d; } </style> <title>無標題文檔</title></head><body> <div class="btn">測試Test</div></body></html>
3、通過js操作class
這個已經很多人寫了，就不用寫例子了
移動端按鈕互動變色實
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
