您的问题不是很清晰,我不能确定您是在问“我能在所有设备上使用:hover
吗?”还是“:hover
在所有设备上表现一样吗?”或者“:hover
是网络上的标准元素吗?”
此外,这主要取决于您对“所有设备”的概念,如果您考虑的是目前使用最多的设备还是也包括使用较少的和不常见的设备。
我将引用以下内容,但我相信您已经阅读过了:
交互式用户代理有时会根据用户操作改变渲染。CSS 为常见情况提供了三个伪类:
:hover
伪类应用于用户指定元素(使用某些指针设备),但不激活该元素。例如,当光标(鼠标指针)悬停在元素生成的框上时,视觉用户代理可以应用此伪类。不支持交互式媒体的用户代理不必支持此伪类。一些支持交互式媒体的符合规范的用户代理可能无法支持此伪类(例如,笔设备)。当用户激活元素时,:active
伪类适用。例如,在用户按下鼠标按钮和释放它之间。
CSS 不定义哪些元素可能处于上述状态,或这些状态如何进入和退出。脚本可以改变元素是否对用户事件做出反应,而不同的设备和 UA 可能有不同的指向或激活元素的方式。
5.11.3 动态伪类::hover、:active 和 :focus
http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
正如您在W3C规范中所看到的,它声称对于非交互式媒体用户代理以及某些交互式媒体用户代理,:hover
伪类并不是必需的。因此可以安全地假设:hover
并非始终被支持。
要深入探讨这个问题,请阅读以下Safari移动版规格说明:
此外,在iOS上使用Safari的用户直接用手指与您的网页内容交互,而不是使用鼠标。 这为触摸启用的接口创造了新机会,但与悬停状态不兼容。例如,鼠标指针可以悬停在网页元素上并触发事件;多点触摸屏幕上的手指则不能。出于这个原因,在iOS上的Safari中模拟了鼠标事件。因此,仅依赖mousemove、mouseover、mouseout或CSS伪类:hover的元素可能无法在iPad或iPhone等触摸屏幕设备上按预期运行。
您可以直接处理触摸,甚至在iOS的Safari中检测高级手势,使用DOM Touch事件touchstart、touchmove、touchend和touchcancel。与被模拟的鼠标事件不同,DOM Touch事件专门设计为与触摸界面一起使用,因此它们的行为是可靠且符合预期的。
5. 为触摸界面做好准备
https://developer.apple.com/library/content/technotes/tn2010/tn2262/_index.html
苹果在这里明确表示,他们倾向于用触摸手势模拟指针,但明确建议避免使用:hover
伪类,因为它在他们的触摸设备上的表现不同。
我们可以深入挖掘并获取地球上每个用户代理的所有文档,但是前两个已足以假设以下情况:
- 非交互式设备不需要支持
:hover
- 交互式设备可以支持伪类(但这并非强制性的,例如屏幕阅读器或点字屏可能会忽略它)
- 在没有指针的情况下,苹果触摸设备会模拟
:hover
- 可以安全地假定当前触摸设备也会模拟
:hover
- 可以安全地假定任何其他浏览器/设备根据其界面不一定需要支持
:hover
- 最近的浏览器很可能都会支持
:hover
,因为它是用户的视觉辅助功能。
因此,回答我上面所有问题的答案:
“:hover
是Web上的标准元素吗?”
:hover
是W3C的标准元素,事实上它声称必须由指针事件触发,但对于某些接口并不是必需的。
“我能在所有设备上使用:hover
吗?”
是的,你可能可以。不支持:hover
的设备很可能是你的目标用户之外的设备/用户。最好问问自己:“我的产品的最终用户是谁?”如果他们只是移动用户、盲人或喜欢使用任天堂DS浏览的人,则不要使用:hover
事件,否则可以使用。
“:hover
在所有设备上的行为是否相同?”
不是的,正如苹果在其设备上所述,它将不会像桌面端那样表现,这可能反映了所有没有指针的设备的相同行为。
如果您计划通过悬停状态进行用户操作,请不要这样做。这通常是一个不好的做法,无论是在桌面设备还是其他情况下都应该避免使用。悬停并不是一个行动的呼叫,点击才是。悬停不应该被视为“切换”,而更像是用户的视觉辅助工具,帮助他/她理解该元素是否会触发某个操作。
如果我理解了您的应用程序,那么悬停并不可靠,在您的特定情况下,您应该重新考虑如何使它起作用。使用一种更可靠的方法(并符合您的用户的期望)。
:hover
。任何基于触摸的浏览器都可能以不同的方式实现它,而且在我看来,iOS 处理得相当糟糕。您应该使用 Modernizr 仅在.no-touch
设备上绑定:hover
事件(这样触摸设备就不会尝试触发自己的:hover
状态),然后在.touch
设备上单独绑定触摸事件,如果您希望触摸某些元素时触发悬停状态。 - Christian“ontouchstart” in document.documentElement
的方法。 - Ronni Skansing:hover
处理建立了任何共同的行为。 - bitinn