CSS :hover in Safari on iPhone and iPad clashes with added classes on click

Question

首先，我只能编辑代码的 CSS/LESS 部分。

我遇到了一个问题，有一个 span 在 :hover 上添加了背景颜色，单击它时有不同的背景，它通过 JS 获得了一个 .active 类。

问题是，在 iPad 和 iPhone 上，第一次点击它会激活 :hover 样式，需要第二次点击才能打开添加的类 .active。谁知道如何忽略 :hover 样式并直接添加类？

非常感谢!

Answer 1

将所有 :hover 规则放在 @media block 中:

@media (hover: hover) {
    a:hover { color: blue; }
}