触摸设备上的悬停事件答案

【问题标题】：hover event on touch device触摸设备上的悬停事件
【发布时间】：2023-04-07 05:13:01
【问题描述】：

当鼠标悬停在<ul> 标记区域上时，我会降低<ul> 的不透明度，然后将<li> 的用户所在的位置设置为完全不透明度。

现在，问题出在平板电脑和手机上，因为在触摸设备上我们没有悬停事件，用户应该点击（触摸）<li>，所以所有其他<li> 将降低不透明度，用户无法取消选择（ unhover) <li> 所以他们应该刷新页面。

我该如何解决这个问题？

【问题讨论】：

你看过这里吗？ Apple 列出了他们的浏览器在触摸事件中可以做什么和不能做什么。看一看：developer.apple.com/library/ios/documentation/AppleApplications/…

标签： html css

【解决方案1】：

在触控设备上，不支持hover。您可以：

• 在触摸设备样式表中跳过悬停效果
• 使用 JavaScript 将悬停变成点击交互
• 使用 JavaScript 在触摸设备上模拟悬停交互

SO 上有多个其他帖子讨论了这个问题：

【讨论】：

【解决方案2】：

由于:hover 在纯触摸浏览器中当然不支持，因此您可以使用 touchStart、touchMove 和 touchEnd 事件（通过 javascript）。这些在 FastClick 库中使用得非常好。

如果您将手指放在屏幕上，一些 CSS :hover 事件也可以通过纯触摸浏览器激活。

【讨论】：

【解决方案3】：

有点晚了……

但您可以使用 css 动画显示菜单 4-5 秒，然后再次隐藏它...

不完美，但你摆脱了 JS .. 并不是说 js 错了，我使用 angularJS..

编辑：- 被要求引用她的链接http://www.greywyvern.com/?post=337

【讨论】：