javascript - iOS 设备处理 :hover pseudo-class? 的默认方式是什么

Question

我有一个可以点击的 div(通过 jQuery $('.mydiv').click )——这会展开 div，第二次点击会折叠它。

同一个 div 应用了一些 CSS :hover 规则(即在悬停时显示更多信息)——这在 PC 上可以正常工作。

当使用 iOS 设备时，点击有效，并且还应用了 :hover 伪类 - 所以我的额外信息会显示出来。这几乎正​​是我想要发生的事情(令人惊讶)。

但是，仅在 CSS 中包含带有 :hover 伪类的内容并不意味着单击会显示它。

那么 iOS 应用(或不应用):hover 状态所遵循的规则是什么？是否有一些文档可以查看？

我真的不想在悬停下隐藏功能，而是必须编写一些特定于触摸的 JavaScript 才能使它们正常工作，因为 iOS 似乎已经为我做了一些工作 - 我只是想知道如何使用它具体功能，而不仅仅是发生在它身上!

Answer 1

您可能已经知道，iOS 实际上并不支持 :hover 伪类，因为它使用了基于触摸的界面。出于兼容性原因，它确实会在特定情况下触发鼠标事件，但这种行为并不是模拟或触发元素的 :hover 状态的最可靠方式，因为您实际上无法将元素悬停在手指的方式与使用鼠标指针的方式相同。来自 this tech note :

Additionally, Safari on iPhone OS users interact with your web content directly with their fingers, rather than using a mouse. This creates new opportunities for touch-enabled interfaces, but does not work well with hover states. For example, a mouse pointer can hover over a webpage element and trigger an event; a finger on a Multi-Touch screen cannot. For this reason, mouse events are emulated in Safari on iPhone OS. As a result, elements that rely only on mousemove, mouseover, mouseout or the CSS pseudo-class :hover may not always behave as expected on a touch-screen device such as iPad or iPhone.

也就是说，由于鼠标事件确实对应于 CSS 中基于鼠标的 UI 状态，因此在文档中对它们进行了一定程度的介绍，但不多。我确实找到了一些东西 here :

The following web technologies are not supported on iOS:

• ...

• Mouse-over events

  The user cannot “mouse-over” a nonclickable element on iOS. The element must be clickable for a mouseover event to occur as described in “One-Finger Events.”

• Hover styles

  Since a mouseover event is sent only before a mousedown event, hover styles are displayed only if the user touches and holds a clickable element with a hover style. Read “Handling Events” for all the events generated by gestures on iOS.

这意味着 :hover 仅在可点击元素上受支持。可点击事件定义here作为:

A clickable element is a link, form element, image map area, or any other element with mousemove, mousedown, mouseup, or onclick handlers.

话虽如此，如果您想在 iOS 上提供一致且可靠的用户体验，最好的选择是针对触控进行设计，因为它就是为此而生的。