在手机浏览器上，点击过后元素上的 :hover 效果一直都会在，怎么才能去掉呢？

[love]

比如做个工具栏按钮，点了之后按钮会一直灰色，除非再点一下页面空白地方，太丑了！

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<style>
.btn { padding: 1em; font-size: xx-large; }
.btn {
  background: #fff;
  border: 1px solid #777;
}
.btn:hover {
  background: #ddd;
}
.btn:focus {
  outline: green solid 5px;
}
.btn:active {
  color: red;
}
</style>

<div id="root">
  <button class="btn" id=btn1>Click Me</button>
  <button class="btn">Click Me 2</button>
</div>

<script>
btn1.onclick = function (e) {
  e.target.blur()
}
</script>

[oul]

:hover 是给鼠标用的，如果想要实现类似效果，可以使用 touch 事件来模拟。

[love]

@oul 我指的是在电脑浏览器上有:hover，在手机上去掉。因为手机上点击后:hover 样式一直都会存在，不象电脑上鼠标走了就没了。


我已经在 SO 上发现方法了（也是用的很绕的方法），应该是浏览器的限制，不可能会有完美的办法。