ios 上的 CSS 悬停仅在分配了事件侦听器时才有效答案

【问题标题】：CSS hover on ios works only if an event listener is assignedios 上的 CSS 悬停仅在分配了事件侦听器时才有效
【发布时间】：2013-01-20 06:35:38
【问题描述】：

我遇到了一个奇怪的问题。我已经使用 js 从选择下拉表单元素中创建了一个 CSS 下拉菜单。它似乎在大多数浏览器中都可以正常工作，但 ios 设备除外。当我悬停下拉 div 时； css 悬停事件不会在 ios 设备中触发，但如果我将事件侦听器添加到下拉元素且侦听器中没有任何操作，则悬停事件开始工作。

这是我要编辑的代码：http://codepen.io/kuldeepdaftary/pen/jKeDi

测试：http://codepen.io/kuldeepdaftary/full/jKeDi

尝试在 JS 中添加以下 sn-p 注释：

  $('.dropdown').click(function(){});

一旦您对上述部分发表评论！ Css hover 将不再在 iphone/ipad 中工作，但只要您取消注释，它就会正常工作。

因为 clickevent 监听函数是空白的！我不明白解决问题的方法是什么？

【问题讨论】：

您是如何在 iOS 设备上将鼠标悬停的？
"如果一个元素有 :hover 事件，那么第一次点击 iOS 渲染 :hover，第二次点击 raise click 事件"

标签： jquery ios css hover event-listener

【解决方案1】：

OP 被证明是在 iOS 上实现“触摸触发：悬停”的可行解决方案。

我大约在同一时间发现的另一种方法是将目标包装在 a[href=trivial] 中。在 iOS 中，目标的 :hover 伪类会在触摸时更可靠地触发。

【讨论】：

【解决方案2】：

ios 设备上没有悬停事件。首先，将显示和隐藏下拉菜单的逻辑隔离到它自己的函数中。然后，您应该根据浏览器中可用的功能来处理此问题。

if ('ontouchstart' in document.documentElement) {
  $(".dropdown").click(hoverFunction);
} else {
  $(".dropdown").hover(hoverFunction);
}

可能值得注意的是，您可以仅使用 CSS 实现下拉功能，在这种情况下，这里有适合您的解决方案： Drop-down menu on touch based devices

【讨论】：