是否可以强制忽略：hover伪类用于iPhone / iPad用户？ [英] Is it possible to force ignore the :hover pseudoclass for iPhone/iPad users?
问题描述
我的网站上有一些css菜单，用扩展：hover （不含js）
I have some css menus on my site that expand with :hover (without js)
这是有效的在iDevices上以半破碎的方式，例如点击将激活：悬停规则并展开菜单，但是在其他地方点击不会删除：悬停。此外，如果元素内部有：hover 'ed，则必须点击两次以激活链接（首先点按触发器：hover ，第二次点击触发链接）。
This works in a semi-broken way on iDevices, for example a tap will activate the :hover rule and expand the menu, but then tapping elsewhere doesn't remove the :hover. Also if there is a link inside the element that is :hover'ed, you have to tap twice to activate the link (first tap triggers :hover, second tap triggers link).
通过绑定，我已经能够在iphone上很好地工作了touchstart event。
I've been able to make things work nicely on iphone by binding the touchstart event.
问题是有时候移动版Safari仍会选择触发：hover 来自我的 touchstart 事件的css 而不是的规则！
The problem is that sometimes mobile safari still chooses to trigger the :hover rule from the css instead of my touchstart events!
我知道这个问题是因为当我在css中手动禁用所有：hover 规则时，移动版Safari很有用（但是常规浏览器显然不再这样了。）
I know this is the problem because when I disable all the :hover rules manually in the css, mobile safari works great (but regular browsers obviously don't anymore).
有没有办法动态取消：hover 当用户进行移动游览时某些元素的规则？
Is there a way to dynamically "cancel" :hover rules for certain elements when the user is on mobile safari?
在此查看和比较iOS行为： http://jsfiddle.net/ 74s35 / 3 /
注意：只有一些css pr operties触发双击行为，例如显示：无;但不是背景：红色;或文字装饰：下划线;
See and compare iOS behavior here: http://jsfiddle.net/74s35/3/ Note: that only some css properties trigger the two-click behavior, e.g. display:none; but not background: red; or text-decoration: underline;
推荐答案
我发现：hover在iPhone / iPad Safari中无法预测。有时点击元素会使元素：悬停，而有时会漂移到其他元素。
I found that ":hover" is unpredictable in iPhone/iPad Safari. Sometimes tap on element make that element ":hover", while sometimes it drifts to other elements.
目前，我只是有一个无法接触的类身体。
For the time being, I just have a "no-touch" class at body.
<body class="yui3-skin-sam no-touch">
...
</body>
并且所有CSS规则都带有：hover以下.no-touch：
And have all CSS rules with ":hover" below ".no-touch":
.no-touch my:hover{
color: red;
}
在页面的某处，我有javascript删除 no-touch 来自正文的课程。
Somewhere in the page, I have javascript to remove no-touch class from body.
if ('ontouchstart' in document) {
Y.one('body').removeClass('no-touch');
}
这看起来并不完美，但无论如何都可行。
This doesn't look perfect, but it works anyway.
这篇关于是否可以强制忽略：hover伪类用于iPhone / iPad用户？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
