移动safari链接保持焦点后触摸 [英] mobile safari links retains focus after touch

问题描述

我的导航很简单。我有一个悬停状态，添加一个边框和一个透明渐变png背景的一些文本，和一个额外的类，当添加jQuery，添加颜色背后的透明图像。

My navigation is quite simple. I have a hover state which adds a border and a transparent gradient png background to some text, and an additional class which, when added by jQuery, adds color behind that transparent image.

如果单击以在Web浏览器中切换类，您将看到颜色进出，但如果您从未将鼠标移动离开按钮，背景图像将保留。这是预期的行为。

If you click to toggle the class in a web browser you'll see the color come in and out, but the background image stays if you never move the mouse away from the button. This is expected behavior.

我的问题是，当使用iPad，触摸似乎保持悬停状态和：hover属性永远不会离开，除非你单击另一个按钮，在这种情况下，persistent：hover属性被添加到该按钮，直到另一个按钮。

My problem is that when using an iPad, the touch seems to retain the hover state and the :hover properties never go away unless you click another button, in which case the persistent :hover properties are added to that button until another is pressed.

我不能想象我是第一个这个问题，没有改变任何东西。

I can't imagine that I am the first with this problem, but searches haven't turned anything up.

帮助？

>

正常 - 悬停 - 活动（通过addClass（））

Normal - Hover - Active (via addClass() )

推荐答案

使用Modernizr，无接触类将被添加到非触摸设备的根html元素。那么你可以这样做：

If you're using Modernizr, the no-touch class will be added to the root html element for non-touch devices. Then you can do this:

a.myclass {
   color:#999;
}

.no-touch a.myclass:hover,
a.myclass:active {
   color:#ccc;
}

这篇关于移动safari链接保持焦点后触摸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！