我有一些css菜单在我的网站上扩展:hover(没有js)
这在iDevices上以半破坏的方式工作,例如轻击将激活:hover规则并展开菜单,但是在其他地方点击不会删除:hover。此外,如果元素中有一个链接:hover’ed,你必须点击两次激活链接(第一次触发:悬停,第二次触发链接)。
我已经能够通过绑定touchstart事件使事情在iPhone上很好地工作。
问题是,有时移动safari仍然选择触发:悬停规则从CSS而不是我的touchstart事件!
我知道这是问题,因为当我禁用所有:悬停规则手动在CSS,移动safari工作伟大(但常规浏览器显然不再)。
有一种方法来动态“取消”:当用户在移动safari时,悬停某些元素的规则?
在这里查看和比较iOS的行为:http://jsfiddle.net/74s35/3/
注意:只有一些css属性触发双击行为,例如。 display:none;但不是背景:红色;或文本装饰:下划线;
解决方法
我发现“:hover”在iPhone / iPad Safari中是不可预测的。有时,点击元素使该元素“:hover”,有时它漂移到其他元素。
目前,我只是在身体有一个“没有触摸”的类。
<body class="yui3-skin-sam no-touch"> ... </body>
并且所有的CSS规则与“:hover”下面的“.no-touch”:
.no-touch my:hover{ color: red; }
在页面中的某处,我有javascript从身体删除不接触类。
if ('ontouchstart' in document) { Y.one('body').removeClass('no-touch'); }
这看起来不太完美,但它仍然工作。