CSS:在iPhone和iPad上的Safari中悬停与单击时添加的类发生冲突

Question

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

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

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

非常感谢！

Answer 1

将所有的：悬停规则放在@media-block:中

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

Answer 2

执行此

a:hover {
background-color: transparent !important; /* If it works without adding !important, then do that. It's best to avoid !important */
}

<a href="#">Focus</a>

Answer 3

这似乎是一个已知的问题。请检查"https://getbootstrap.com/docs/3.3/getting-started/#support-粘性悬停移动"了解更多细节。解决上述问题的可能解决方案很少是http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml">