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

Posted 2023-03-06

【中文标题】CSS：悬停在移动设备或其他设备上作为切换

【英文标题】：CSS :hover on mobile or other device as toggle

【发布时间】：2014-06-23 21:17:38

【问题描述】：

我正在做一个简单的:hover滑入式封面，如图所示，它应该滑入“收藏文章”控件，然后用户可以单击该控件以收藏该项目。

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

如果我理解正确，至少在 ios (Safari) 和 android (Chrome) 上，默认浏览器行为是将触摸模拟为 hover 和 click。但它是标准吗？例如。

Windows Phone 或 Wii U 也会这样做吗？ click 会在hover 之后大约 300 毫秒被触发，所以会出现鬼点击问题吗？

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

澄清：我不是在询问:hover 支持，这仅在指针驱动的环境中才有意义。我在问设备是否可以并且应该在用户单击/点击时处理可悬停元素（就像 iOS/Android 一样）

【问题讨论】：

我不会依赖 :hover 在所有设备上提供相同类型的支持。任何基于触摸的浏览器都可以以不同的方式实现它，iOS 处理它的恕我直言。您应该使用 Modernizr 仅在 .no-touch 设备上绑定 :hover 事件（这样触摸设备就不会尝试触发自己的 :hover 状态），然后如果您愿意，则在 .touch 设备上单独绑定您的触摸事件触发某些元素的点击悬停状态。

当某物支持（或不支持）触摸或悬停时，您是否考虑过使用feature detection？沿着 document.documentElement 中的“ontouchstart”

@RonniSkansing 功能检测非常可行，并且可能是当今的标准程序。但我很好奇，在过去的 2-3 年中，我们是否为:hover 在非指针设备上的处理建立了任何共同行为。

@bitinn 并非所有设备都支持悬停。我们已经建立了针对这些和其他怪癖进行优雅后备的常用方法。如果没有触摸事件，请使用modernizr 或如前所述向悬停元素添加一个类..

【参考方案1】：

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

此外，这在很大程度上取决于您对“所有设备”的概念，如果您想到的是当前最常用的设备，或者您还考虑了鲜为人知和使用过的设备。

我将引用您以下内容，但我很确定您已经阅读过：

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

:hover 伪类在用户指定元素时应用 （使用一些指点设备），但没有激活它。例如，一个 当光标（鼠标 指针）悬停在元素生成的框上。 用户代理不 支持交互媒体不必支持这个伪类。 一些支持交互式媒体的符合标准的用户代理可能不是 能够支持这个伪类（例如，笔设备）。 :活跃的 伪类在用户激活元素时应用。 例如，在用户按下鼠标按钮和 释放它。

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 会与您的网页内容进行交互 直接用手指，而不是使用鼠标。 这会创建 触控界面的新机会，但效果不佳 悬停状态。例如，鼠标指针可以悬停在 网页元素并触发事件；多点触控屏幕上的手指 不能。因此，iOS 上的 Safari 模拟了鼠标事件。 结果，元素只依赖于 mousemove、mouseover、mouseout 或者 CSS 伪类 :hover 在 触摸屏设备，例如 iPad 或 iPhone。

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

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

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

我们可以更深入地挖掘并获取地球上存在的每个用户代理的所有文档，但前两个足以假设以下内容：

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

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

“:hover 是网络上的标准元素吗？”

悬停是一个标准的 W3C 实际上它声称它必须由指针事件触发，但对于某些接口不是必需的。

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

是的，您可能可以。不支持 :hover 的设备很可能是可能不是您的主要目标的设备/用户。最好问问自己“谁将成为我产品的最终用户？”如果他们只是移动用户、盲人或只是喜欢使用 Nintendo DS 浏览的人，则不要使用:hover 事件，否则请使用。

“:hover 在所有设备上的行为是否相同？”

不，正如 Apple 在其设备上声明的那样，其行为与台式机不同，这可能反映了所有没有指针的设备上的相同行为。

如果您打算通过悬停状态进行用户操作，请不要这样做。这通常是不好的做法，在任何情况下都应该避免，包括桌面设备。悬停不是号召性用语，单击是。悬停不应被视为“切换”，而更像是用户的视觉助手，让他/她了解该元素，如果单击，则会触发操作。

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

【讨论】：

CSS does not define which elements may be in the above states, or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs may have different ways of pointing to, or activating elements. - 所以 CSS2 规范确实不需要明确要求实现，现在问题变成了我们是否看到设备制造商之间达成任何共识（或者可能通过更新的 CSS 规范进行更新）？

不管怎样，我相信我们已经深入到这个兔子洞里了，所以指点你先生！

我在那里胡乱猜测。悬停状态的概念显然早在 CSS 出现之前就出现了（想想游戏菜单），桌面浏览器后来也适应了同样的事情，它仍然是 CSS 中最常用的功能之一。归根结底，你的手指实际上是一个指针，我只是认为支持一个过去到处都在使用并且肯定会在未来使用的功能是有意义的。

【参考方案2】：

在我看来，这个问题的一部分尚未得到解答，即 Windows 手机与“悬停”相关的实际行为是什么。澄清一下：

考虑一个为桌面/鼠标使用而编写的网页，其中有 css 标记，以便“悬停”更改应用于对象的样式。如果一个人在 iPhone 或 Android 上查看该页面并点击该对象，则会发生样式更改。 （即它表现得好像对象有一个 onClick() 事件处理程序来更改样式）。 Windows Phone 上也会发生同样的事情吗？

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

没有。当您在敲击的初始部分用手指按下时，样式会发生变化，但是当您在敲击结束时松开手指时，样式会恢复为原始样式。 （这可以说是对触摸的“悬停”更有效的解释，尽管它是否有任何实际用途是另一回事。）

我要补充一点，iPhone/Safari 对悬停的解释也有一个“关闭”状态。当您点击另一个对象时会触发此事件。

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

总而言之，除了没有法律标准来解释移动设备上的悬停，也没有事实上的标准。因此，如果您以手机为目标，请避免“悬停”。

【参考方案3】：

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

我会说你最好的选择是争取最小的公分母，并假设每个触摸设备只能响应触摸动作。

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

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

【参考方案4】：

将光标悬停在网页元素上是使用鼠标和键盘浏览时的常见操作，但在基于触摸的浏览中则没有类似的操作。本主题演示如何使用 aria-haspopup 文档对象模型 (DOM) 属性在 Windows 8 上使用 Internet Explorer 10 模拟触控设备上的悬停。

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

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

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

【讨论】：

“实际上，点击是一个动作中的悬停和激活。这使得触摸用户无法访问隐藏在悬停后面的交互式内容。” - 这是我不确定的部分：iOS 和 Android 都可以点击以显示 :hover 元素，然后再次点击（单击）以激活控件 - 所以这适用于这 2 台设备。

我的意思是，当你同时拥有 :hover 样式和 onclick 事件时，例如，在 :hover 区域的提交按钮上，用户最终会花费大部分时间来尝试调用“点击按钮（悬停点击 300 毫秒，点击点击 300 毫秒）。

true，尤其是对于 iOS，因为 width=device-width 页面不会自动删除 300 毫秒。但我的示例很有效，因为我们有一个滑入式 css 变换效果，可以为用户提供良好的感知性能。

太棒了 :) 我错过了赏金 ;)

【参考方案5】：

目前没有一个很好的支持移动端的:hover状态

See related question about this

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

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

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

希望这会有所帮助

【讨论】：

我不是在询问:hover 支持，这仅在指针驱动的环境中才有意义。我在问设备是否在用户单击/点击时处理可悬停元素（iOS/Android 执行）