Get a free trial // Grow your CSS skills // Land your dream job

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

  • # October 12, 2013 at 5:08 pm

    Hey all,

    So I have a ul that does something like this:

    (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.


    # October 12, 2013 at 7:54 pm

    You can do this with CSS:

    This should also work in mobile browsers, including iOS.

    # October 12, 2013 at 8:09 pm

    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:, then the problem remains that the “un-hover” doesn’t work on iOS. Been struggling with it myself for quite a while.

    # October 13, 2013 at 6:27 am

    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).

    # October 13, 2013 at 5:04 pm

    I had a similar issue and the following bit worked for me…

    <body ontouchstart="">
        Your Content Here

    Also, add :focus to your :hover states

    # October 15, 2013 at 2:57 pm

    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
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed