:跨移动设备的悬停行为

Posted 2023-05-08

【中文标题】:跨移动设备的悬停行为

【英文标题】：:hover behavior across mobile devices

【发布时间】：2014-10-17 22:24:54

【问题描述】：

在为我正在重新设计的网站开发移动导航菜单时，我发现许多移动浏览器通过点击触发 CSS :hover 事件，包括 Chrome、FlashFox 和 android 4.x 上的默认浏览器，如以及 ios 7 上的 Safari。这种行为是否广泛传播到足以依赖？我假设 Android 2.x 手机可能会出现问题。

我想知道是否有人对此有任何经验，以及这种行为是否可以安全地用于我的导航菜单。还有任何类型的规范定义了这种行为，还是只是出现了？从我所见，它似乎在不同设备上的表现相当一致。

我以前用 javascript 做过移动导航菜单，但这是一个不错的选择。

我知道在 *** 上有几个关于这个主题的问题，但它们已经很老了，我找不到任何专门针对我想知道的问题。

编辑：澄清一下，该网站是采用响应式设计开发的，我并不是简单地尝试将桌面样式导航栏与 :hover 一起使用。该菜单针对移动设备进行了格式化，并且 :hover 将取代编写 JavaScript 以在点击菜单选项时显示子菜单的需要。

【问题讨论】：

哦，是的，:hover 事件让我在使用移动设备上网时发疯，尤其是在悬停时打开菜单时...

Does css hover work on mobile devices? 的可能重复项

这个问题很老了，几乎与我观察到的和正在询问的行为完全无关；回答/询问时，Android 2 是全新的

我用的挺多的，而且效果很好，所以我还是靠它，但以防万一暂时留下一个 JS 回退

【参考方案1】：

有人说使用:hover，其他人说使用:active。我说两者都使用（在一个规则中），设备将使用在该设备上工作的一个（或两者）。

无论如何，我觉得它有效。

希望这会有所帮助。

【讨论】：

感谢:active，我将稍等片刻，看看是否还有其他问题，但这会有所帮助

我构建菜单的方式，active 不能实际应用于这个特定项目，但它是唯一的答案，所以你得到了信用

quirksmode.org/css/selectors/hover.html :hover 和 :active 上的有趣信息。