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