只有当一个事件监听器被分配时，CSS才会在ios上运行。

I'm facing a weird problem. I have created a css dropdown menu out of select dropdown form element using js. And it seems to work fine in most of the browsers but ios devices. When I hover the dropdown div; css hover event is not triggered in ios devices but if I add an eventlistener to dropdown element with no actions in the listener the hover event starts working.

我面临一个奇怪的问题。我使用js创建了一个css下拉菜单。它在大多数浏览器中都很好用，但ios设备却很好用。当我将下拉部分悬停的时候;在ios设备中没有触发css鼠标悬停事件，但是如果我将eventlistener添加到dropdown元素中，而在侦听器中没有动作，则鼠标悬停事件开始工作。

Here's my code to edit : http://codepen.io/kuldeepdaftary/pen/jKeDi

下面是我要编辑的代码:http://codepen.io/kuldeepdaftary/pen/jKeDi。

to test : http://codepen.io/kuldeepdaftary/full/jKeDi

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

Try commenting following snippet in JS:

请尝试用JS来评论下面的代码片段:

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

once you comment the above part ! Css hover will not work anymore in iphone/ipads but as soon as you uncomment it, it will work normally.

一旦你评论了以上部分!Css鼠标悬停在iphone/ipad上不再起作用，但一旦你取消评论，它就会正常工作。

Since the clickevent listner function is blank ! I dont understand what is it that solving the problem?

因为clickevent listner函数是空的!我不明白是什么解决了这个问题?

2 个解决方案

#1

There is no hover event on ios devices. First of all isolate the logic for showing and hiding the dropdown into its own function. Then you should approach this based on the features available to you in the browser.

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

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

It might be worth noting that you can achieve dropdown functionality using only CSS in which case there is a solution here for you: Drop-down menu on touch based devices

值得注意的是，您可以仅使用CSS实现下拉功能，在这种情况下有一个解决方案:基于触摸的设备的下拉菜单。

#2

OP turned out to be a viable solution to the implementation of "touch to trigger :hover" on iOS.

OP被证明是一个可行的解决方案，在iOS上实现“触摸触发:鼠标悬停”。

An alternative which I discovered about the same time, was to wrap the target in an a[href=trivial]. The target's :hover pseudo-classes are then more reliably trigger upon touch in iOS.

我在同一时间发现的另一种选择是将目标放在a[href=琐碎]中。目标的:悬浮的伪类在iOS中更可靠地触发。

#1