css 点击/触摸后按钮保持悬停模式(移动的)

wh6knrhe  于 2023-01-27  发布在  其他
关注(0)|答案(2)|浏览(142)

http://codepen.io/abdulahhamzic/pen/ALQqGq
在移动的浏览器中点击/触摸“开始”、“重置”、“严格”和“旋转”按钮后,它们会保持悬停模式。以下是相关的CSS代码:

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

所以,基本上,在移动的上,每个按钮,在被触摸后,保持与#ffff4d背景,而不是#5c8a8a,直到我按下其他地方...

iezvtpos

iezvtpos1#

在我的用例中,我只想在设备 * 可以 * 悬停时有悬停效果,而在设备 * 不能 * 悬停时没有任何悬停效果。
我通过媒体查询解决了这个问题。

button {
  background: #5c8a8a;
}

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

这将仅在设备的主要输入具有悬停能力时添加悬停效果。
或者,如果您确实希望即使在没有悬停的设备上也能发生 * 一些 * 事情,那么DBS建议的activeAndreas Boyer是一个不错的选择。
使用媒体查询可以同时实现这两种效果,它可能看起来像这样。

button {
  background: #5c8a8a;
}

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

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

这增加了按下移动的上的按钮时的背景变化(没有挥之不去的悬停效果),并保持桌面上的悬停效果。
媒体查询贷记到Kevin Powell

goqiplq2

goqiplq22#

button:active{background: #5c8a8a;}

相关问题