Have a single tap trigger a hover in iOS and another release the hover?

[Alex]

Hey all,

So I have a ul that does something like this:

http://jsfiddle.net/L4cmV/

(It’s sloppy, the final is cleaner)

and in iOS you have to hold your finger on the div in order to reveal, which makes it difficult to click one of the 2 links.

I seem to be stuck on how I can make this trigger on tap – stay open until you tap it again, or tap one of the 2 links…

Any help would be greatly appreciated.

Thanks.

[Martin Duran]

You can do this with CSS:

http://codepen.io/Martin-Duran/pen/qtpJF

This should also work in mobile browsers, including iOS.

[Senff]

This should also work in mobile browsers, including iOS.

It doesn’t, because iOS only detects hovers on <A> tags, not <DIV>s.

But even if you would change the divs to an A, and have something like this: http://codepen.io/senff/pen/qwjhC, then the problem remains that the “un-hover” doesn’t work on iOS. Been struggling with it myself for quite a while.

[Martin Duran]

Senff is right, there would be no way to get the div to close. What you could do is include a close button, styled as you please, at a breakpoint that would only target small devices. Then, attach some jQuery to that button the would close the div on click (touch).

[Alex]

I ended up doing this and it worked great…

                if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {

                $(".th-painting").click(function(){  // Update class to point at the head of the list

                });

[Author]

Posts