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
這個已經很多人寫了，就不用寫例子了