是否有可能强制忽略:hover伪类用于iPhone/iPad用户？

我的网站上有一些css菜单,用:hover(没有js)扩展

这在iDevices上以半破碎的方式工作,例如点击将激活:hover规则并展开菜单,但是在其他地方点击不会删除:hover.此外,如果元素内部有一个链接,则:hover必须点击两次以激活链接(第一次点击触发:hover,第二次点击触发链接).

通过绑定touchstart事件,我已经能够在iphone上很好地工作了.

问题是,有时移动safari仍然选择:hover从css 而不是我的touchstart事件触发规则!

我知道这是问题,因为当我:hover在css中手动禁用所有规则时,移动safari工作得很好(但是常规浏览器显然不再存在).

有没有办法:hover在用户进行移动旅行时动态"取消" 某些元素的规则？

在这里查看和比较iOS行为:http://jsfiddle.net/74s35/3/ 注意:只有一些css属性会触发双击行为,例如display:none; 但不是背景:红色; 或文字装饰:下划线;

1> Morgan Cheng..：

---

我发现":hover"在iPhone/iPad Safari中无法预测.有时点击元素使该元素":悬停",而有时它会漂移到其他元素.

目前,我只是在身体上有一个"无接触"课程.

   ...

并将所有CSS规则与":hover"置于".no-touch"下方:

.no-touch my:hover{
   color: red;
}

在页面的某个地方,我有javascript 从正文中删除无触摸类.

if ('ontouchstart' in document) {
    Y.one('body').removeClass('no-touch');
}

这看起来并不完美,但无论如何都可行.

---

由于新的Windows 8系统具有触摸和鼠标输入,我最近在这种方法中发现了问题

---

这是唯一的方法.困扰我的是,它污染了"普通"网站,这些网站不属于那里并且无关紧要.那好吧.谢谢.

---

对Tom的评论+1 - 即使插入外部监视器(其中更需要具有悬停状态的鼠标友好站点),检查ontouchstart将在具有触控功能的笔记本电脑上返回true.

---

@Shackrock:我不认为"轻击一下,两次点击"的方法是一个很好的解决方案.因为事实上在触摸设备上没有实际的悬停(直到它们带有可以感觉到你的手指悬停在屏幕上的屏幕),我认为最好不要模拟悬停.对于效果,如按钮和链接上常见的效果,只需跳过效果即可.对于在悬停时展开的菜单,请在点击/单击时展开它们.我的2c.

2> Zenexer..：

---

:hover这不是问题.适用于iOS的Safari遵循一个非常奇怪的规则.它激发mouseover和mousemove第一; 如果在这些事件期间发生任何变化,"点击"和相关事件不会被触发:

mouseenter并且mouseleave似乎包含在内,但它们未在图表中指定.

如果您因这些事件而修改任何内容,则不会触发单击事件.这包括DOM树中更高的东西.例如,这将阻止单击点击使用jQuery在您的网站上运行:

$(window).on('mousemove', function() {
    $('body').attr('rel', Math.random());
});

编辑:为了澄清,jQuery的hover事件包括mouseenter和mouseleave.click如果内容发生变化,这些都会阻止.

---

当然:悬停是问题:-)或者更确切地说是Safari的bug实现它.这是关于这个问题的有趣背景,但苹果是唯一可以解决这一可怕行为的政党.当点击元素之外的某些东西时,它需要"撤消",或者从不首先"悬停".当前的行为基本上打破了使用的任何网站:鼠标悬停

3> Beau Smith..：

---

浏览器功能检测库Modernizer包括对触摸事件的检查.

它的默认行为是为您检测到的每个要素的html元素应用类.然后,您可以使用这些类来设置文档样式.

如果未启用触摸事件,Modernizr可以添加以下类no-touch:

然后使用此类确定悬停样式的范围:

.no-touch a:hover { /* hover styles here */ }

您可以下载自定义的Modernizr构建,以根据需要包含少量或多个功能检测.

以下是可能应用的一些类的示例:

4> Simon_Weaver..：

---

一些设备(正如其他人所说)同时具有触摸和鼠标事件.例如,Microsoft Surface有一个触摸屏,一个触控板和一个触控笔,当它悬停在屏幕上方时实际上会引发悬停事件.

任何:hover基于"触摸"事件的存在而禁用的解决方案也会影响Surface用户(以及许多其他类似设备).许多新的笔记本电脑都是触摸式的并且会响应触摸事件 - 所以禁用悬停是一种非常糟糕的做法.

这是Safari中的一个错误,这种可怕的行为绝对没有理由.我拒绝破坏非iOS浏览器,因为iOS Safari中存在多年来一直存在的错误.我真的希望他们下周能为iOS8解决这个问题,但与此同时......

我的解决方案:

有人建议使用Modernizr,Modernizr允许您创建自己的测试.我在这里基本上做的是"抽象"浏览器的概念,该浏览器支持:hoverModernizr测试,我可以在整个代码中使用而无需if (iOS)整个硬编码.

 Modernizr.addTest('workinghover', function ()
 {
      // Safari doesn't 'announce' to the world that it behaves badly with :hover
      // so we have to check the userAgent  
      return navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? false : true;
 });

然后css变成这样的东西

html.workinghover .rollover:hover 
{
    // rollover css
}

仅在iOS上,此测试将失败并禁用翻转.

这种抽象的最好的部分是,如果我发现它在某个Android上中断或者如果它在iOS9中修复了那么我可以修改测试.

5> Troy..：

---

将FastClick库添加到您的页面将导致移动设备上的所有点击都变成点击事件(无论用户点击的位置),因此它还应该修复移动设备上的悬停问题.我编辑你的小提琴作为一个例子:http://jsfiddle.net/FvACN/8/.

只需在您的页面上包含fastclick.min.js lib,然后通过以下方式激活:

FastClick.attach(document.body);

作为附带好处,它还将消除移动设备遭受的恼人的300毫秒onClick延迟.

使用FastClick会产生一些轻微的后果,这可能会对您的网站产生影响,也可能无关紧要:

如果您点击页面上的某个位置,向上滚动,向下滚动,然后将手指放在最初放置的完全相同的位置,FastClick会将其解释为"点击",即使它显然不是.至少它是如何在我正在使用的FastClick版本(1.0.0)中工作的.从那个版本开始,有人可能已经解决了这个问题.

FastClick删除了某人"双击"的能力.

6> Estevão Luca..：

---

一个更好的解决方案,没有任何JS,css类和视口检查:您可以使用交互媒体功能(媒体查询级别4)

像这样:

@media (hover) {
  // properties
  my:hover {
    color: red;
  }
}

iOS Safari 支持它

更多关于:https: //www.jonathanfielding.com/an-introduction-to-interaction-media-features/