iOS设备处理hover伪类的默认方式是什么？ [英] What is the default way an iOS device handles the :hover pseudo-class?

问题描述

我有一个div可以点击（通过jQuery $（'。mydiv'）。点击） - 这扩展了div，第二次点击折叠它。 / p>

同一个div有一些CSS ：hover 应用于它（即在悬停时显示更多信息）

使用iOS设备时，点击工作，AND也会应用：hover 伪类 - 所以我的额外的信息出现。

但是，只要有一个：hover 伪类在CSS中并不意味着点击会显示它。

那么iOS下面应用（或不使用）：hover 状态的规则是什么？在某处可以看到一些文档吗？

我真的不想隐藏悬停下的功能，必须编写一些触摸特定的JavaScript，使其工作，因为它似乎iOS已经为我做了一些工作 - 我只是想知道如何使用这个功能，而不是只是发生在它身上！

解决方案

你可能知道，iOS实际上不支持：hover 伪类，因为它使用基于触摸的界面。出于兼容性原因，它会在特定情况下触发鼠标事件，但是这种行为不是模拟或触发元素的：hover 状态的最可靠的方法，因为您不能实际上用您的手指悬停元素的方式与鼠标指针相同。从此技术说明：

此外，iPhone操作系统上的Safari用户直接用手指与您的网络内容进行互动，而不是使用鼠标。这为启用触摸的界面创造了新的机会，但是对于悬停状态不能很好地工作。例如，鼠标指针可以悬停在网页元素上并触发事件;多指触摸屏上的手指不能。因此，在iPhone操作系统的Safari中模拟鼠标事件。因此，只依赖于 mousemove ， mouseover ， mouseout 或CSS伪类：hover 在iPad或iPhone等触摸屏设备上的运行情况可能不尽如人意。

也就是说，由于鼠标事件对应于CSS中基于鼠标的UI状态，因此它们在文档中被覆盖到一定程度，但不是太多。我找到了此处：

iOS不支持以下网络技术：

• ...




• 鼠标悬停事件

  
  
  

  用户不能在iOS上鼠标悬停不可点击的元素。对于 mouseover 事件，必须可以点击元素，如单指事件。




• 悬停样式

  
  
  

  由于 mouseover 事件仅在 mousedown 事件，只有在用户触摸并按住具有悬停样式的可点击元素时，才会显示悬停样式。阅读

$ b>处理事件 $ b

这意味着：hover 仅支持可点击元素。可点击事件定义 here as：

可点击元素是链接，表单元素，图片映射区域或 mousemove ， mousedown ， mouseup onclick 处理程序。

并在iOS上提供可靠的用户体验，最好的打算是为触摸设计，因为这是为它做的。

I have a div that can be clicked (via jQuery $('.mydiv').click ) - this expands the div, a second click collapses it.

The same div has some CSS :hover rules applied to it (i.e. to show more info on hover) - this works as intended on a PC.

When using an iOS device, the click works, AND also applies the :hover pseudo-class - so my extra info shows up. This is pretty much exactly what I wanted to happen (amazingly).

However, just having something with a :hover pseudo-class in the CSS does not mean a click will reveal it.

So what are the rules that iOS is following to apply (or not) the :hover state? Are there some docs somewhere to view?

I don't really want to hide functionality under hovers and have to write some touch specific JavaScript to make them work because it seems that iOS is already doing some of that work for me - I just want to know how to use that functionality specifically rather than just happening across it!

解决方案

As you're probably aware, iOS doesn't actually support the :hover pseudo-class simply because it uses a touch-based interface. It does fire mouse events in specific circumstances for compatibility reasons, but this behavior isn't the most reliable way to emulate or trigger an element's :hover state, since you can't actually hover an element with your finger the same way you do with a mouse pointer. From 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.

That said, since mouse events do correspond to mouse-based UI states in CSS, they are covered to a certain extent in the docs, but not by much. I did find something 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.

This implies that :hover is only supported on clickable elements. Clickable events are defined here as:

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

With that said, if you want to provide a consistent and reliable user experience on iOS, your best bet is to design for touch, since that's what it's made for.

这篇关于iOS设备处理hover伪类的默认方式是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！