1

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.

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

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

Try commenting following snippet in 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.

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

Kuldeep Daftary
  • 611
  • 3
  • 16
  • 31

2 Answers2

2

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.

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

Community
  • 1
  • 1
Dean
  • 5,884
  • 2
  • 18
  • 24
0

OP turned out to be a viable solution to the implementation of "touch to trigger :hover" on 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.

jerng
  • 499
  • 6
  • 13