Question

我正在做一个简单的:hover幻灯片封面，如图所示，它应该在“最喜欢的文章”控件中滑动，然后用户可以点击以收藏此项目。

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

如果我理解正确，至少在iOS（Safari）和Android（Chrome）上，默认的浏览器行为是模仿hover和click的触摸。但它是标准吗？例如

Windows Phone或Wii U会不会这样做？
click之后大约300毫秒hover会被解雇，因此可能会出现幽灵点击问题？

我当然可以绑定此元素上的点击/触摸事件，只是想知道现在css :hover是否足够。

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

enter image description here

Answer 1

您的问题并不完全清楚，我无法理解您是否要求＆＃34;我可以在所有设备上使用:hover吗？＆＃34;或者＆＃34;所有设备:hover的行为是否相同？＆＃34;或者＆＃34; :hover是网络上的标准元素吗？＆＃34;

此外，它很大程度上取决于您对所有设备＆＃34;的概念，如果您考虑到目前使用最多的设备，或者您正在考虑使用不太知名且使用过的设备。

我会引用以下内容，但我很确定你已经读过：

交互式用户代理有时会更改呈现以响应   用户操作。 CSS为常见情况提供了三个伪类：

：hover伪类适用于用户指定元素的情况   （有一些指点设备），但不会激活它。例如，a   可视用户代理可以在光标（鼠标等）时应用此伪类   指针）悬停在元素生成的框上。 用户代理没有   支持交互式媒体不必支持这种伪类。   一些支持交互式媒体的合规用户代理可能不是   能够支持这个伪类（例如，一个笔设备）。：活跃   当用户激活元素时，将应用伪类。   例如，在用户按下鼠标按钮的时间和之间   发布它。

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会与您的网络内容进行互动   直接用手指，而不是用鼠标。 这会创造   启用触摸的界面的新机会，但效果不佳   悬停状态。例如，鼠标指针可以悬停在a上   网页元素并触发事件;手指放在Multi-Touch屏幕上   不能即可。因此，在iOS上的Safari中模拟鼠标事件。   因此，元素仅依赖于mousemove，mouseover，mouseout   或CSS伪类：悬停可能并不总是在预期的行为上   触摸屏设备，如iPad或iPhone 。

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

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

Apple在这里明确指出，他们倾向于使用触摸手势来模拟指针，但是他们明确建议避免使用:hover伪类，因为他们的触摸设备上的行为相同。< / p>

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

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

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

＆＃34;网络上有:hover标准元素吗？＆＃34;

Hover是一个标准的W3C，事实上它声称必须由指针事件触发，但并不是某些接口所必需的。

＆＃34;我可以在所有设备上使用:hover吗？＆＃34;

是的，可能可以。不支持的设备：悬停很可能是设备/用户可能不是您的主要目标。最好问问自己＆＃34;谁将成为我产品的最终用户？＆＃34;如果他们只是移动用户，或者只是盲人，或者只是喜欢使用Nintendo DS进行浏览的用户，那么请不要使用:hover个活动，否则请执行此操作。

＆＃34;所有设备:hover的行为是否相同？＆＃34;

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

如果您打算通过悬停状态进行用户操作，请不要这样做。这通常是不好的做法，在任何情况下都应该避免，包括桌面设备。悬停不是号召性用语，点击即可。悬停不应被视为＆＃34;切换＆＃34;但更像是用户的视觉帮助，使他/她理解该元素，如果点击，会触发一个动作。

如果我了解您的应用程序，那么悬停是不可靠的，在您的具体情况下，您应该重新思考它应该如何工作。使用更可靠的方法（并期望用户使用）

Answer 2

将光标悬停在网页元素上是使用鼠标和键盘浏览时的常见操作，但在基于触摸的浏览方面没有相应的功能。本主题演示如何使用aria-haspopup文档对象模型（DOM）属性在Windows 8上使用Internet Explorer 10模拟在启用触摸的设备上进行悬停。

此行为不适用于Windows 7上的Internet Explorer 10（不支持使用aria-haspopup进行悬停模拟）或Windows 8.1上的Internet Explorer 11（具有内置触摸悬停支持）。

在触摸场景中，悬停将在触摸时应用于元素。但是，点击元素也可以激活元素，例如导航链接。实际上，轻击是在一个动作中悬停和激活。这使得隐藏在悬停后面的交互式内容对于触摸用户是不可访问的。交互模型完全不同，并且没有触摸模拟将光标悬停在页面元素上。

最佳做法是不使用悬停来隐藏用户可以使用的内容与。。。相互作用。相反，请考虑使用onclick事件来切换可视性。

Answer 3

在我看来，这个问题的一部分还没有得到解答，即Windows手机与“hover”相关的实际行为是什么？澄清：

考虑一个为桌面/鼠标使用而编写的网页，其中有css标记，以便＆＃39; hover＆＃39;更改应用于对象的样式。如果在iPhone或Android上查看该页面并点击该对象，则会发生样式更改。（即它的行为就像对象有一个onClick（）事件处理程序来改变样式）。在Windows Phone上是否会发生同样的事情？

我可以回答这个问题，至少对于运行Win 8.1的诺基亚Lumia 630来说：

没有。当您用手指按下水龙头的初始部分时，会发生样式更改，但是当您在水龙头末端松开手指时，样式将恢复为原始样式。（这可以说是对触摸的更有效的解释，尽管它是否具有实际用途是另一回事。）

我想补充一点，iPhone / Safari对悬停的解释也有一个关闭＆＃39;州。点击另一个对象时会触发此操作。

为了展示这一点并允许在不同的设备/浏览器上进行测试，我在www.davidleader.net/mobiledemo.html设置了一个演示页面。这实现了onClick（），onMouseover（）和：hover来改变图像的不透明度，在下面显示不同的图像。（因此，它取决于对不透明度的支持，但这已经存在了一段时间。）还有一个“愚蠢的图形”。点击以显示iPhone上悬停的结束。

总而言之，除了在移动设备上悬停的解释没有 de jure 标准之外，还没有事实上的。因此，如果您要定位移动广告，请避免“停留”。

Answer 4

目前没有人能够提供良好的支持：在移动设备中悬停状态

See related question about this

我没有将Modernzr.js用于移动设备，但它表示它可以检测浏览器是否支持触摸事件，因此如果用户使用移动设备，它基本上会在html标记中添加“.touch”类。

所以你会像这样使用它，例如

.touch a:active{ /*css code here */ }

希望这会有所帮助

Answer 5

说到手机，我怀疑是否有任何标准。是的，触摸设备在触摸时应用悬停状态是很常见的，但是您永远无法判断用户是否可以使用任何可能以不同方式解释悬停状态的浏览器。

我想说你最好的选择是拍摄最低的公分母，并假设每个触控设备只能响应触控动作。

当然，答案就是编写媒体查询和/或javascript来强制浏览器以您希望的方式运行。

这只是我个人的理念，值得的。

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

5 个答案: