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