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

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

<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>