点击/触摸后按钮仍处于悬停模式（移动设备）

Question

http://codepen.io/abdulahhamzic/pen/ALQqGq

在移动浏览器中，点击/触摸“start”、“reset”、“strict”和“spin”按钮后，它们会保持悬停模式。以下是相关的CSS代码:

button {
  background: #5c8a8a;
}
button:hover {
  background: #ffff4d!important;
}

基本上，手机上的每个按钮在被触摸后都会保留#ffff4d的背景色，而不是#5c8a8a，直到我在其他地方按下...

- Abdullah Hamzic

---

你无法在触摸屏设备上悬停... 你可能正在寻找 active - DBS

Answer 1

在我的使用情况中，我只想让鼠标指向效果在设备可以使用悬停时出现，在设备无法使用悬停时不出现任何悬停效果。

我通过媒体查询来解决这个问题。

button {
  background: #5c8a8a;
}

@media (hover: hover) {
  button:hover {
    background: #ffff4d;
  }
}

只有当设备的主输入具有悬停功能时，此操作才会添加悬停效果。

---

或者，如果您希望在没有悬停功能的设备上发生某些事情，那么像DBS和Andreas Boyer建议的那样使用active是一个不错的选择。

使用媒体查询来同时拥有两种效果，可能看起来像这样。

button {
  background: #5c8a8a;
}

@media (hover: hover) {
  button:hover {
    background: #ffff4d;
  }
}

@media (hover: none) {
  button:active {
    background: #ffff4d;
  }
}

在移动设备上按下按钮时，此代码将添加背景更改（无残留悬停效果），并保留桌面上的悬停效果。

---

媒体查询信用归Kevin Powell所有。

- M Stefan Walker

Answer 2

button:active{background: #5c8a8a;}

- Andreas Boyer

---

尝试使用额外的!important来覆盖你的:hover - 或者从你的:hover中删除!important。 - Andreas Boyer

虽然这段代码片段可能解决了问题，但是包括解释真的有助于提高您的帖子质量。请记住，您正在为未来的读者回答问题，而这些人可能不知道您的代码建议的原因。 - andreas