【问题标题】::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 做过移动导航菜单,但这是一个不错的选择。

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

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

【问题讨论】:

  • 哦,是的,:hover 事件让我在使用移动设备上网时发疯,尤其是在悬停时打开菜单时...
  • 这个问题很老了,几乎与我观察到的和正在询问的行为完全无关;回答/询问时,Android 2 是全新的
  • 我用的挺多的,而且效果很好,所以我还是靠它,但以防万一暂时留下一个 JS 回退

标签: css mobile hover


【解决方案1】:

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

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

希望这会有所帮助。

【讨论】:

  • 感谢:active,我将稍等片刻,看看是否还有其他问题,但这会有所帮助
  • 我构建菜单的方式,active 不能实际应用于这个特定项目,但它是唯一的答案,所以你得到了信用
  • quirksmode.org/css/selectors/hover.html :hover:active 上的有趣信息。
猜你喜欢
  • 2015-11-04
  • 2014-10-18
  • 1970-01-01
  • 2020-01-21
  • 2021-06-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-02-01
相关资源
最近更新 更多