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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2021 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

2 条回复

oul

2019-05-14 10:27:00 +08:00

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

love

2019-05-14 11:01:05 +08:00

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

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