在手机浏览器上，点击过后元素上的 :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>