css 悬停是否适用于移动设备？

Does css hover work on mobile devices?

提问by Sam

Does css hover work on mobile devices? I have a css hover class which works fine on a regular web browser, but doesn't work on mobile browsers.

css 悬停是否适用于移动设备？我有一个 css 悬停类，它在常规 Web 浏览器上运行良好，但在移动浏览器上不起作用。

采纳答案by Joey

The :hoverpseudo-class needs a pointing (graphical input) device, capable of distinguishing the actions pointingand selecting/activating.Usually on mobile devices with a touch interface you don't have the former, only the latter. Also some pen interfaces only allow activating, not pointing.

的:hover伪类需要定点（图形输入）设备，能够区分动作的指向和选择/激活。通常在带有触摸界面的移动设备上，您没有前者，只有后者。还有一些笔接口只允许激活，而不允许指向。

The :hoverpseudo-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).

—W3C: CSS 2.1: Selectors, dynamic pseudo-classes

的:hover伪类适用，而用户指定的元件（有一些指示设备），但不将其激活。例如，当光标（鼠标指针）悬停在元素生成的框上时，可视化用户代理可以应用这个伪类。不支持交互式媒体的用户代理不必支持这个伪类。一些支持交互式媒体的符合要求的用户代理可能无法支持这个伪类（例如，笔设备）。

— W3C：CSS 2.1：选择器，动态伪类

So, to answer your question: It depends on the device but likely no. And don't rely on it. With touch-screen devices quickly gaining in popularity you'll lose the entirety of pointing-only events.

所以，回答你的问题：这取决于设备，但可能没有。不要依赖它。随着触摸屏设备的迅速普及，您将失去全部的指向性事件。

回答by Andy Baker

Sigh. It seems like no-one answering this question actually tried it on a real device. In many cases it does work. The first click acts as a hover.

叹。似乎没有人回答这个问题实际上在真实设备上尝试过。在许多情况下它确实有效。第一次单击充当悬停。

Some more info here: http://designshack.net/articles/css/are-hover-events-extinct/

这里有更多信息：http: //designshack.net/articles/css/are-hover-events-extinct/

回答by David

What does the questioner mean by "Does css hover work on mobile devices?"?

提问者所说的“css 悬停在移动设备上是否有效？”是什么意思？

He obviously doesn't mean it literally, because there is no such thing as hover on mobile devices so it cannot work.

他显然不是字面上的意思，因为没有悬停在移动设备上这样的东西，所以它无法工作。

If he means "On mobile devices if I tap on an object with a hover style does anything happen?" the answer is Yes, but what happens varies with the device/browser.

如果他的意思是“在移动设备上，如果我点击带有悬停样式的对象会发生什么事情？” 答案是肯定的，但发生的情况因设备/浏览器而异。

Specifically on iPhone/Safari and Android the response is as if you have written an OnClick() event handler with the style change in it, and this persists until you tap on another object. On Windows phone the style change occurs while your finger is pressed down on the phone and then reverts when you release it.

特别是在 iPhone/Safari 和 Android 上，响应就像您编写了一个 OnClick() 事件处理程序，其中的样式发生了变化，并且这种情况一直存在，直到您点击另一个对象。在 Windows 手机上，当您的手指在手机上按下时，样式会发生变化，然后在您松开手指时恢复。

You can check your device at the test site I set up at davidleader.net/mobiledemo.html.

您可以在我在davidleader.net/mobiledemo.html 上设置的测试站点检查您的设备。

回答by Nathan Long

Not unless the device can detect when someone is hovering their finger over the screen, about to tap. :)

除非设备可以检测到某人何时将手指悬停在屏幕上，即将点击。:)

回答by Digicoder

It depends upon the browser used in the mobile device. Refer to Quirks Modefor mobile devices and see if your browser / platform will implement it.

这取决于移动设备中使用的浏览器。请参阅移动设备的Quirks 模式，看看您的浏览器/平台是否会实现它。

回答by dajam

From my own experience, it works fine on my iphone4, whatever is the browser (safari or chrome), but does not works properly on my nexus10 with chrome...

根据我自己的经验，它在我的 iphone4 上运行良好，无论浏览器是什么（safari 或 chrome），但在我的带有 chrome 的 nexus10 上不能正常工作......

I used :hover to implement menu. When I say "it works", I mean that the first touch behaves like an hover on a desktop, and a second touch will behaves like a click. When I say "it does not work", I mean that a touch behaves like a click directly...

我使用 :hover 来实现菜单。当我说“它有效”时，我的意思是第一次触摸的行为类似于桌面上的悬停，第二次触摸的行为类似于点击。当我说“它不起作用”时，我的意思是触摸就像直接点击一样......

回答by Dustin Laine

I would say no, as you do not hover in a mobile interface. You can just press, if on touch screen. Otherwise you just move through links.

我会说不，因为您不会将鼠标悬停在移动界面中。如果在触摸屏上，您只需按下即可。否则，您只需浏览链接。

回答by silverskater

won't do its magic on touchscreen devices, but it does work on mobiles where the user navigates by using some arrow keys (or on amazon kindle)

不会在触摸屏设备上发挥其魔力，但它确实适用于用户使用某些箭头键（或亚马逊 Kindle）导航的手机

回答by rlemon

also works for blackberry storm 1 devices as they have touch, and click events due to their suedo-tactile screens.

也适用于黑莓风暴 1 设备，因为它们具有触感，并且由于其绒面触感屏幕而产生点击事件。

回答by peq

:hover works with the android default browser, but it is really tricky (for the user) to trigger the hover without triggering a click at the same time.

:hover 适用于 android 默认浏览器，但触发悬停而不同时触发点击真的很棘手（对于用户）。