移动端按钮点击

新手求大神解答，我想在移动实现按钮点击点击前一个颜色，点击时一个背景色，松开后一个背景色。

---

参考：Safari Web Content Guide

<button ontouchstart="">click me for funny</button>

button {
  background-color: lightgrey;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
button:hover {
  background-color: grey;
}
button:active {
  background-color: red;
}

demo

---

移动端需要添加样式和js

.item {
  -webkit-tap-highlight-color: rgba(0,0,0,0); // 隐藏系统自带的背景
  // add `ontouchstart` attribte on body
  // to allow :active work (if :active not work)
  &:active {
    background: #ECECEC
  }
}

只添加上面的样式，:active 在移动端不一定（已经引入 zepto 的已经包含下面的 js 了）生效，需要下面的js

document.body.addEventListener('touchstart', function() {}, false);
// 也可以直接在body上添加 `ontouchstart` 属性，

参考：https://uedsky.com/2016-05/fr...

---

css伪元素hover

---

<button class="color"></button>
button：hover
button:visited

试试