Grow your CSS skills. Land your dream job.

iPad “hover effect”

  • # August 8, 2012 at 4:42 am

    I’ve been on the look out for an iPad equivalent of a ‘hover effect’. I want the user to be able to touch an image link which triggers the ‘hover effect’ (i.e image swap or greyed out box) and then when the user touches the same image a second time, they are then taken to the appropriate link. I have since found something similar being used on this site http://www.123inspiration.com when I previewed it on a mobile device. By clicking an image it is then greyed out and the second click will take you to the link. It also allows you to click one image and have it grey out – then click a different image, which will cause the previous image to revert to normal while this latest image becomes greyed out. My jquery background is limited and wondered if anyone was able to isolate this effect and perhaps provide a jsfiddle link of it?

    # August 8, 2012 at 5:46 am

    personal opinion:

    1.) ipad or any touch device
    you are touching it not hovering there with your mouse .. so hover state on ipad ? (a:active … maybe)

    2.) user experience
    sucks = why ?
    do not know how about you but I do not care for clicking / touching a link 2x times ! to get where I want
    seems silly, unreasonable and I would leave such web as it is irritating

    # August 8, 2012 at 1:59 pm

    In iOS all hover events are treated as a click event. So, if you have a :hover style on a link, a user will have to click the link twice.

    # October 18, 2012 at 11:13 am

    If the image swap or grey out box is set to appear with opacity: 0/1 then the click just takes you straight to the link, whereas if display:none/block is used a tap on the ipad brings up the hover event, then the link works on the second tap.

    I can’t make my mind up in a project I’m working on at the moment, on the one hand the two tap method shows valuable info, but having to tap twice can get irritating with lots of items.

    # November 16, 2012 at 11:20 am

    I think that the big problem is that people can’t see (or even know about) the content of CSS drop-down menus. Extremely poor for even basic usability.

    By the way, this problem only seems to happen on some iPads. Others don’t seem to have this problem.

    # November 16, 2012 at 11:46 am

    I made a Git of a simple solution for this that uses a carat. However, preventDefault() via JS can help in these situations.

    GIT: https://github.com/andyunleashed/ResponsiveDropDown

    - Live example: http://www.unleash-it.co.uk/git-demos/responsive-dropdown/index.html

    # May 30, 2013 at 3:16 pm

    If you do want the double tap—according to [this article](http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/ “this article”),—you have to have a hidden element be shown on hover. This will make iOS wait and make you click the link again.

    I had some css animation going on hover that I wanted to show before it redirected to another page, but I didn’t want to show/hide any of the elements I was animating on hover. I ended up just making an empty span to show/hide:

    Example

    Works like a charm—if you really want/have to make the user click twice!

    # May 30, 2013 at 3:24 pm

    My code didn’t show everything so I made a jsfiddle: [http://jsfiddle.net/kevinkirchner/LuL5R/embedded/result/](http://jsfiddle.net/kevinkirchner/LuL5R/embedded/result/ “http://jsfiddle.net/kevinkirchner/LuL5R/embedded/result/”)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

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