单击/触摸后按钮保持悬停模式（移动设备）

Question

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

在移动浏览器中单击/触摸“开始”、“重置”、“严格”和“旋转”按钮后，它们将保持悬停模式。这是相关的 CSS 代码：

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

所以，基本上，在移动设备上，每个按钮在被触摸后都会保留 #ffff4d 背景而不是 #5c8a8a，直到我按下其他地方......

Answer 1

在我的用例中，我只想在设备可以悬停时具有悬停效果，而在设备无法悬停时不具有任何悬停效果。

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

button {
  background: #5c8a8a;
}

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

仅当设备的主要输入具有悬停功能时，才会添加悬停效果。

或者，如果您确实希望在没有悬停功能的设备上发生某些事情，那么DBS和Andreas Boyeractive的建议似乎是一个不错的选择。

使用媒体查询来实现这两种效果，它可能看起来像这样。

button {
  background: #5c8a8a;
}

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

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

这会在移动设备上按下按钮时添加背景更改（没有持久的悬停效果），并在桌面上保留悬停效果。

媒体查询功劳为凯文·鲍威尔。