Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS ‘Second click’

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #38417
    euan_mc
    Member

    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.

    #104054
    Senff
    Participant

    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/

    #104090
    euan_mc
    Member

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

    #104092
    euan_mc
    Member

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

    #104294
    TheDoc
    Member

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

    #104314
    euan_mc
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.