CSS悬停可以在移动设备上使用吗？
CSS悬停可以在移动设备上使用吗？我有一个 css 悬停类，它在常规网络浏览器上运行良好，但在移动浏览器上不起作用。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（11）
:hover伪类需要一个指向（图形输入）设备，能够区分指向和选择/激活操作。通常在移动设备上具有触摸界面的设备没有前者，只有后者。此外，某些笔接口仅允许激活，而不允许指向。因此，回答您的问题：这取决于设备，但可能不是。并且不要依赖它。随着触摸屏设备的迅速普及，您将失去全部仅指向事件。
The
:hoverpseudo-class needs a pointing (graphical input) device, capable of distinguishing the actions pointing and 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.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.
叹。似乎没有人回答这个问题，实际上在真实的设备上尝试过。在很多情况下它确实有效。第一次单击充当悬停。
更多信息请参见：http://designshack.net/articles/css/are -悬停事件灭绝/
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/
提问者所说的“CSS悬停在移动设备上工作吗？”是什么意思？
他显然不是字面意思，因为移动设备上没有悬停这样的东西，所以它无法工作。
如果他的意思是“在移动设备上，如果我点击具有悬停样式的对象，会发生什么情况吗？”答案是肯定的，但发生的情况因设备/浏览器而异。
特别是在 iPhone/Safari 和 Android 上，响应就像您编写了一个 OnClick() 事件处理程序，其中包含样式更改，并且这种情况一直持续到您点击另一个对象为止。在 Windows Phone 上，当您的手指在手机上按下时，样式会发生变化，然后在您松开手指时恢复。
您可以在我设置的测试网站 davidleader.net/mobiledemo.html 上检查您的设备。
What does the questioner mean by "Does css hover work on mobile devices?"?
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.
You can check your device at the test site I set up at davidleader.net/mobiledemo.html.
除非设备能够检测到有人将手指悬停在屏幕上准备点击。 :)
Not unless the device can detect when someone is hovering their finger over the screen, about to tap. :)
这取决于移动设备中使用的浏览器。请参阅移动设备的Quirks 模式，看看您的浏览器/平台是否会实现它。
It depends upon the browser used in the mobile device. Refer to Quirks Mode for mobile devices and see if your browser / platform will implement it.
根据我自己的经验，它在我的 iphone4 上运行良好，无论浏览器是什么（safari 或 chrome），但在带有 chrome 的 nexus10 上无法正常运行...
我使用
:hover来实现菜单。当我说“它有效”时，我的意思是第一次触摸的行为就像在桌面上悬停一样，第二次触摸的行为就像单击一样。当我说“它不起作用”时，我的意思是触摸的行为就像直接单击一样......
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...
I used
:hoverto 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...
我会说不，因为您不会将鼠标悬停在移动界面中。如果在触摸屏上，您只需按一下即可。否则你只能通过链接移动。
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.
在触摸屏设备上不会发挥其魔力，但它确实可以在用户使用某些箭头键（或在亚马逊 kindle 上）进行导航的移动设备上工作
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)
也适用于 Blackberry Storm 1 设备，因为它们的 Suedo 触觉屏幕具有触摸和单击事件。
also works for blackberry storm 1 devices as they have touch, and click events due to their suedo-tactile screens.
是的，确实如此。如果您不相信，请尝试一下。
i) 在 Codepen 或您拥有帐户的其他堆栈上编写 Hover Css。
ii) 保存您的工作。 [如果添加'border-bottom: 1px dotted black'很容易看出]
iii) 在您的手机、平板电脑或任何您想要证明的设备上打开它。 [你的笔省了，脑子就是CodePen]
结果，你就会得到答案。不要太相信理论，只要实践并证明即可。
Yes, it has. if you don't believe, try it.
i) Write Hover Css on Codepen or other stack which you had Account.
ii) Save your work. [it easy to see if you add 'border-bottom: 1px dotted black']
iii) Open it on your Mobile, Tablet or whatever you want to prove. [which your pen save, mind is CodePen]
As result, you'll get the answer. Don't believe the theory much, just practice and prove it.
:hover适用于 Android 默认浏览器，但（对于用户而言）触发悬停而不同时触发点击确实很棘手。:hoverworks 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.