CSS:将鼠标悬停在移动设备或其他设备上作为切换

Question

我正在做一个简单的:hover滑入式封面,如图所示,它应该在"最喜欢的文章"控件中滑动,然后用户可以点击以收藏此项目.

虽然它在鼠标悬停和点击的桌面上运行良好,但我不确定它是否可以用作移动设备或其他设备上的有效控件(即点击切换,然后再次点击收藏项目).

如果我理解正确,至少在iOS(Safari)和Android(Chrome)上,默认的浏览器行为是模拟触摸为hover和click.但这是一个标准吗？例如.

• Windows Phone或Wii U会不会这样做？
• 将click被解雇约300ms后hover,所以可以有鬼点击问题？

我当然可以在这个元素上绑定一个click/touch事件,只是想知道:hover现在css 是否足够.

澄清一点:我不是在询问:hover支持,它只能在指针驱动的环境中产生感觉.我问的是,当用户点击/点击时,设备是否可以并且应该处理可悬停的元素(如iOS/Android那样)

Answer 1

你的问题并不完全清楚,我无法理解你是否在问"我可以: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 Mobile的规范:

此外,iOS用户上的Safari会直接用手指与您的网络内容进行互动,而不是使用鼠标.这为启用触摸的界面创造了新的机会,但对悬停状态不起作用.例如,鼠标指针可以悬停在网页元素上并触发事件; 手指在Multi-Touch屏幕上不能.因此,在iOS上的Safari中模拟鼠标事件.因此,仅依赖于mousemove,mouseover,mouseout或CSS伪类:悬停的元素可能并不总是在iPad或iPhone等触摸屏设备上按预期运行.

您可以直接处理触摸,甚至可以使用DOM Touch事件touchstart,touchmove,touchend和touchcancel在iOS上的Safari中检测高级手势.与模拟的鼠标事件不同,DOM Touch事件专门设计用于触摸界面,因此它们的行为是可靠的和预期的.

5.准备触摸界面 https://developer.apple.com/library/content/technotes/tn2010/tn2262/_index.html

Apple明确指出,他们倾向于使用触摸手势来模拟指针,但是他们明确建议避免使用:hover伪类,因为它们的触摸设备上的行为不会相同.

我们可以深入挖掘并获取地球上现有的每个用户代理的每个文档,但前两个足以承担以下内容:

• 非交互式设备不必支持 :hover
• 交互设备可以支持伪类(但它不是强制性的,它们可以忽略它,例如屏幕阅读器或盲文屏幕)
• 没有指针的Apple触控设备模拟 :hover
• 假设当前的触摸设备也模拟是安全的 :hover
• 可以安全地假设任何其他浏览器/设备不一定必须支持,:hover具体取决于它们的接口.
• 最近的浏览器很可能都支持,:hover因为它是用户的视觉辅助.

所以回答我上面假设的所有问题:

"这是:hover网络上的标准元素吗？"

Hover是标准的W3C,实际上它声称必须由指针事件触发,但某些接口不需要它.

"我可以:hover在所有设备上使用吗？"

是的,你可能可以.不支持的设备:悬停很可能是可能不是您的主要目标的设备/用户.最好问问自己"谁将成为我产品的最终用户？" 如果他们只是移动用户或只有盲人或只有喜欢使用Nintendo DS浏览的人,那么就不要使用:hover事件,否则就这样做.

" :hover所有设备的表现都一样吗？"

不,正如Apple在他们的设备上所说的不会像桌面那样表现,这可能反映了没有指针的所有设备上的相同行为.

如果您计划通过悬停状态进行用户操作,请不要这样做.这通常是不好的做法,在任何情况下都应该避免,包括桌面设备.悬停不是号召性用语,点击即可.悬停不应被视为"切换",而更像是用户的视觉助手,使他/她理解该元素(如果单击)会触发操作.

如果我理解你的应用程序,那么悬停是不可靠的,在你的具体情况下,你应该重新思考它应该如何工作.使用更可靠的方法(并期望用户)