CSS：在移动设备或其他设备上悬停以切换 [英] CSS :hover on mobile or other device as toggle

问题描述

我在做一个简单的：hover 幻灯片封面，如图所示，它应该在喜欢的文章控件中滑动，然后用户可以点击

虽然在鼠标悬停和点击的桌面上运行良好，但我不确定它是否可以用作移动或其他设备上的有效控制

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

• Windows Phone或Wii U是否具有相同的功能？


• c / c> c /> > c>点击会在大约300ms后触发 ul>
  
  

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

  要澄清：我不是在询问：hover 支持，在指针驱动的环境中。我问的是设备是否可以和应该处理悬停元素，因为用户点击/点击（作为iOS / Android做）

  
  
  

  解决方案

  您的问题不是完全清楚，我不明白你是否问我可以在所有设备上使用：hover 吗？或Will ：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用户与您的网络内容直接交互
  用他们的手指，而不是使用鼠标。 这会为启用触摸的界面创建
  个新商机，但无法在悬停状态下显示
  。例如，鼠标指针可以悬停在
  网页元素上并触发事件;多指触摸屏上的手指
  无法。因此，鼠标事件会在iOS上的Safari中模拟。
  因此，仅依赖于mousemove，mouseover，mouseout
  或CSS伪类的元素可能不会总是在
  触摸屏设备上的预期行为

  
  
  

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

  
  
  

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

  
  

  苹果使用触摸手势模拟指针，但是他们清楚地建议避免使用：hover 伪类，因为它们在触摸设备上的行为不会相同。

  
  
  

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

  
  
  
  
  
  • 非交互式设备不必支持：hover
  
  
  
  
  • 没有指针的Apple触摸设备会模拟： hover
  
  
  • 可以安全地假设当前的触摸设备还模拟：hover
  
  
  • 可以假定任何其他浏览器/设备不一定必须支持：hover ，具体取决于其界面。
  
  
  • 很可能最近的浏览器都会支持：hover ，因为它是用户的视觉帮助。
  
  
  
  
  

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

  
  

  $ c>：hover 网络上的标准元素？

  
  

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

  
  

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

  
  

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

  
  

  c>：hover 在所有设备上的行为是否相同？

  
  

  不，因为苹果在他们的设备上声明的行为不会像桌面一样，并且这可能反映了没有指针的所有设备上的相同行为。 / p>
  
  

  如果您计划通过悬停状态拥有用户操作，请勿执行此操作。这通常是不好的做法，它应该避免在任何情况下，包括桌面设备。悬停不是要调用的操作，单击是。悬停不应被视为切换，而是更像一个视觉帮助，使用户能够理解该元素（如果点击）触发操作。

  
  
  

  我理解你的应用程序，然后悬停是不可靠的，在你的具体情况下，你应该重新思考它应该如何工作。
  使用更可靠的方法（预期从您的用户）

  
  

  I am doing a simple :hover slide-in cover as shown in picture, it's supposed to slide in a "favorite article" control, which user can then click to favorite this item.

  While it work well on desktop with mouse hover and click, I am not sure if it can be used as an effective control on mobile or other device (ie. click to toggle, then click again to favorite item) .

  If I understand correctly, at least on iOS (Safari) and Android (Chrome), the default browser behaviour is to emulate touch as both hover and click. But is it a standard? eg.

  • Will Windows Phone or maybe a Wii U does the same?
  • Will click be fired about 300ms after hover, so there can be ghost click issue?

  I can certainly bind a click/touch event on this element, just wondering if css :hover is sufficient nowadays.

  To clarify: I am not asking about :hover support, which only make senses in a pointer driven environment. I am asking if devices can and should handle hover-able element as users click/tap (as iOS/Android do)

  解决方案

  Your question isn't totally clear and I cannot understand whether you're asking "Can I use :hover across all the devices?" or "Will :hover behave the same across all the devices?" or "Is :hover a standard element on the web?"

  Also it greatly depends of your concept of "all devices", if you have in mind the currently most used devices or you are taking in account also the less-known and used devices.

  I will quote you the following, but I am pretty sure you have already read that:

  Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:

  The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device). The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

  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.

  5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

  As you can see on the W3C specification it claims that the :hover pseudo-class is not required to a non-interactive media user agents as well as some interactive media user agents. Therefore is safe to assume :hover is not always supported.

  To dig deep on the matter, take a read at the following specification for Safari Mobile:

  Additionally, Safari on iOS 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 iOS. 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.

  You can handle touches directly or even detect advanced gestures in Safari on iOS, using the DOM Touch events touchstart, touchmove, touchend, and touchcancel. Unlike mouse events which are emulated, DOM Touch events are specifically designed to work with touch interfaces, so their behavior is reliable and expected.

  5. Prepare for a touch interface https://developer.apple.com/library/safari/technotes/tn2010/tn2262/_index.html

  Apple clearly states here that they tend to emulate the pointer with the touch gestures, however they clearly suggest to avoid using the :hover pseudo-class as won't behave the same on their touch device.

  We could dig deeper and fetch every documentation for each user-agent existing on earth but the previous two are enough to assume the following:

  • Non interactive devices do not have to support :hover
  • Interactive devices can support the pseudo-class (but it's not mandatory and they can ignore it, for example screen-readers or braille screens)
  • Apple touch devices in absence of a pointer emulates :hover
  • It is safe to assume current touch devices also emulates :hover
  • It is safe to assume any other browser/device don't necessarily have to support :hover depending on their interface.
  • Very likely the recent browsers will all support :hover because is a visual aid for the user.

  So to answer to all the question(s) I have assumed above:

  "Is :hover a standard element on the web?"

  Hover is a standard W3C in fact it claims it must be triggered by a pointer event, but isn't required for some interfaces.

  "Can I use :hover across all the devices?"

  Yes you probably can. The devices which won't support :hover very likely are devices/users that probably aren't your main target. Better ask yourself "Who will be the end-user of my product?" if they are only mobile users or only blind people or only people who like to browse using the Nintendo DS then don't use :hover events, otherwise do.

  "Will :hover behave the same across all the devices?"

  No, as Apple stated on their devices will not behave the same as a desktop would, and that probably reflects the same behaviour on all devices without a pointer.

  If you plan to have an user action via a hover state don't do it. This is generally bad practice and it should avoided in any case, including desktop devices. Hover is not an action to call, click is. Hover should not be treated as a "toggle" but more like a visual helper for the user making him/her understand that element, if clicked, triggers an action.

  If I understood your application then hover isn't reliable and in your specific case you should rethink on how it should work. Use a more reliable method (and expected from your user)

  这篇关于CSS：在移动设备或其他设备上悬停以切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！