是否可以强制忽略 iPhone/iPad 用户的 :hover 伪类? [英] Is it possible to force ignore the :hover pseudoclass for iPhone/iPad users?
问题描述
我的网站上有一些使用 :hover 展开的 css 菜单(没有 js)
这在 iDevices 上以半中断的方式工作，例如点击将激活 :hover 规则并展开菜单，但点击别处不会删除 :hover.此外，如果元素内有一个 :hover 的链接，您必须点击两次以激活链接(第一次点击触发 :hover，第二次点击触发链接).
通过绑定 touchstart 事件，我已经能够在 iphone 上很好地工作.
问题是有时移动 safari 仍然选择从 css 而不是我的 touchstart 事件触发 :hover 规则！
我知道这是问题所在，因为当我在 css 中手动禁用所有 :hover 规则时，移动 safari 运行良好(但常规浏览器显然不再如此).
当用户使用移动 Safari 时，有没有办法动态取消"某些元素的 :hover 规则?
在此处查看和比较 iOS 行为:http://jsfiddle.net/74s35/3/注意:只有一些 css 属性会触发两次单击行为，例如显示:无；但不是背景:红色；或文字装饰:下划线；
我发现 ":hover" 在 iPhone/iPad Safari 中是不可预测的.有时点击元素使该元素:悬停"，而有时它会漂移到其他元素.
就目前而言，我只是在身体上开设了一个无接触"课程.
...并在.no-touch"下方添加:hover"的所有 CSS 规则:
.no-touch my:hover{红色;}在页面的某处，我使用 javascript 从正文中删除 no-touch 类.
if ('ontouchstart' in document) {Y.one('body').removeClass('no-touch');}这看起来并不完美，但它仍然有效.
I have some css menus on my site that expand with :hover (without js)
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).
I've been able to make things work nicely on iphone by binding the touchstart event.
The problem is that sometimes mobile safari still chooses to trigger the :hover rule from the css instead of my touchstart events!
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).
Is there a way to dynamically "cancel" :hover rules for certain elements when the user is on mobile safari?
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;
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>
And have all CSS rules with ":hover" below ".no-touch":
.no-touch my:hover{
color: red;
}
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.
这篇关于是否可以强制忽略 iPhone/iPad 用户的 :hover 伪类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
