CSS的hover在移动设备上是否有效？

Question

CSS hover在移动设备上能够生效吗？我有一个CSS hover类，在常规的Web浏览器中正常工作，但在移动浏览器上却不起作用。

- Sam

---

http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/ - Pacerier

Answer 1

:hover 伪类需要一个有指针（图形输入）设备，能够区分“指向”和“选择/激活”操作的输入设备。通常，在触摸界面的移动设备上你没有前者而只有后者。此外，一些笔式输入设备只允许激活而不是指向。

:hover 伪类应用于用户指定元素（使用某种指针设备），但未激活该元素时。例如，当光标（鼠标指针）悬停在元素生成的框上时，视觉用户代理可以应用这个伪类。不支持交互媒体的用户代理不必支持此伪类。一些支持交互媒体的合规用户代理可能无法支持此伪类（例如，笔式设备）。

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

因此，回答你的问题：它取决于设备，但可能不行。不要依赖它。随着触摸屏设备快速普及，你将失去全部仅限指向的事件。

- Joey

---

也许新技术会使得仅点触事件得以回归。例如，可以参考这个链接：1和2。 - Sony Santos

我知道Wacom正在研究这个，但是您真的期望它们在可预见的未来得到广泛使用吗？ - Joey

是的！你预料到触摸屏手机（或任何其他当前技术）会如此迅速地得到广泛使用吗？ :) - Sony Santos

这么快？大部分关于手势的原创研究都发生在80年代。从那时起已经过去了几十年。此外，触摸设备已经具有可用的交互范例，超出了众所周知和古老的WIMP。不清楚我们是否必须为了保持它而使其永久存在。 - Joey

Answer 2

唉，看来没有人回答这个问题时真正在实际设备上尝试过。在许多情况下，它确实有效。第一次点击的作用类似于悬停。

更多信息请参见：http://designshack.net/articles/css/are-hover-events-extinct/

- Andy Baker

---

好的，如果点击某些东西没有任何反应，只有悬停才会有反应，这是可以接受的。但在我看过的大多数情况下，:hover 触发了一些辅助信息，例如工具提示或类似的内容，在您单击时提供有关所发生的事情的信息。由于在移动设备上无法将两者分开，因此一个非常重要的用例就会丢失。 - Joey

@Јοеу - 我同意，但值得知道的是，在触摸设备上，:hover并不完全是一种无效的选择。 - Andy Baker

@zach-saucier 我最近没有再进行任何测试。 - Andy Baker

只想补充一点，对于移动设备来说，:hover的可靠性非常低。正如@andybak所说，它确实有效，但要使其可靠，就必须使用另一种方法来解决这个问题。 - magnudae

Answer 3

“Does css hover work on mobile devices?”这个问题的提问者是什么意思？

很明显，他并不是字面上的意思，因为移动设备上没有悬停这个功能，所以它不能正常工作。

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

具体来说，在iPhone/Safari和Android上，响应就像你编写了一个OnClick()事件处理程序并带有样式更改一样，并且这种变化会持续到你点击另一个对象。在Windows手机上，样式更改会在你按住手机屏幕时发生，然后在释放时恢复。

您可以在我设置的测试网站上检查您的设备，该网站位于davidleader.net/mobiledemo.html。

- David

Answer 4

除非设备能够检测到有人悬停手指在屏幕上，即将轻触。 :)

- Nathan Long

---

对于手指来说，这将是一个几乎没什么用处的功能，因为在那些设备的尺寸下，你很可能会把手指放在任何会对悬浮反应的地方。除非你的手指是半透明的，否则很难看到。;-) - Joey

+1，这是即将到来的好消息！例如，请查看此链接和此链接，了解更多信息。 - Sony Santos

Answer 5

这取决于移动设备中使用的浏览器。请参考Quirks Mode以查询您的浏览器/平台是否支持它。

- Digicoder

Answer 6

从我的个人经验来看，无论是使用safari还是chrome浏览器，在我的iphone4上都能正常工作，但在我的nexus10上使用chrome浏览器时无法正常工作...

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

- dajam

Answer 7

我会说不，因为在移动界面上你不会悬停。如果是触摸屏，你只需点击即可。否则，你只需通过链接进行导航。

- Dustin Laine

Answer 8

在触摸屏设备上无法发挥其魔力，但在用户使用某些箭头键进行导航的移动设备（或亚马逊 Kindle 上）可以正常工作。

- silverskater

Answer 9

同样适用于黑莓风暴1设备，因为它们具有触摸和点击事件，这归功于其拟触觉屏幕。

- rlemon

Answer 10

是的，它确实有。如果你不相信，试一试。 i) 在 Codepen 或其他你有账号的堆栈上编写 Hover Css。 ii) 保存你的工作。[如果添加 'border-bottom: 1px dotted black' 方便查看] iii) 在你想要证明的手机、平板电脑或其他设备上打开它。[笔记保存在 CodePen 上]

结果就会让你得到答案。不要太相信理论，只需实践并证明它。

- Bbub Mum