Grow your CSS skills. Land your dream job.

‘Second click’

  • # June 8, 2012 at 5:00 am

    I’m designing a web site that uses hover effect on image links. This needs to translate onto an ipad but obviously ‘hover’ doesn’t extend to ipad. I was curious if it was possible to have it so that the ‘first click’ as it were, activates the hover effect, and a ‘second click’ then takes you to the link? I’ve looked a dreamweavers ‘onclick’ but its either one click or double click not two separate clicks.

    # June 8, 2012 at 7:29 am

    The trick is to keep the link (on the image) hidden until you hover it. On iPad, it will then only appear when you actually tap it (which simulates a hover). There is no “unhover” state on iPad, so the link will stay there and you can click it.

    Here’s how it works for one image: http://jsfiddle.net/senff/A64QU/6/

    I’ve made the link BLACK so you can see when it’s actually there.

    On desktop, the black link appears when you hover (and you can click it right away).
    On iPad, the black link appears when you do the iPad equivalent of hover (tapping it), and then the next tap will be an actual click.

    On iPad, the black link should only disappear when you hover on any other image. Tried that but couldn’t make it work this quickly so I’ll look into that later if no one else does. Works on desktop but not on iPad: http://jsfiddle.net/senff/A64QU/7/

    # June 8, 2012 at 7:31 am

    Thanks Senff. Hopefully you’ll find you can get it working for the iPad when you have more time.

    # June 12, 2012 at 7:29 am

    Has anyone managed to use Senff’s initial code and get this working on the iPad?

    # June 12, 2012 at 2:09 pm

    The first tap *should* initiate a hover state if there is one, no extra code required.

    # June 13, 2012 at 4:52 am

    Doc- do you perhaps have a fiddle link you could share that has that working? A lot of javascript just goes over my head.

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