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:

    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.

    # October 12, 2013 at 7:54 pm

    You can do this with CSS:

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

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

    # 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
    
    </body>
    

    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.

*May or may not contain any actual "CSS" or "Tricks".