iPad “hover effect”

[euan_mc]

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?

[TheDoc]

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.

[Preface Studios Ltd]

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.

[Harry2000]

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.

[kevink]

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!

[kevink]

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/”)

[Author]

Posts