只有在分配事件监听器的情况下，CSShover在ios上才有效

我正面临一个奇怪的问题。 我已经创build了一个CSS下拉菜单中的select使用js下拉表单元素。 它似乎在大多数的浏览器，但ios设备工作正常。 当我将鼠标hover在下拉菜单上时 csshover事件不是在ios设备中触发的，但是如果我添加一个eventlistener到下拉元素而在监听器中没有动作，hover事件开始工作。

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

testing： http : //codepen.io/kuldeepdaftary/full/jKeDi

尝试JS中的以下片段的评论：

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

一旦你评论上述部分！ Csshover将不再在iPhone / iPad的工作，但只要你取消注释，它将正常工作。

由于clickevent列表function是空白的！ 我不明白这是什么解决问题？

Answer 1

ios设备上没有hover事件。 首先将显示和隐藏下拉菜单的逻辑分离到自己的function中。 那么你应该根据你在浏览器中可用的function来处理这个问题。

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

可能值得注意的是，只有使用CSS才能实现下拉function，在这种情况下，您可以使用以下解决scheme： 基于触摸的设备上的下拉菜单

Answer 2

OP原来是在iOS上实施“touch to trigger：hover”的可行解决scheme。

另一个我在同一时间发现的替代方法是将目标包装在一个[平凡]中。 目标的：hover伪类然后更可靠地在iOS触摸触发。