Question

I am creating a website using a jQuery hover effect. The website is perfect on desktop, with the mouse on the image I have an hover effect that put a black layer on the image and show the text inside of the box, then click on the link inside and I will redirected to the page, but when I try on ipod touch/iphone/ipad it doesn’t work.

Here is the fiddle: http://jsfiddle.net/IronFeast/RvfQg/

How can I modify my code? I’d like to recreate a double click on the box to show what’s inside:
1st click) selection;
2nd click) start the effect.

Any help would be appreciated.

Answer 1

I like how you’re using all CSS here. You’re question isn’t entirely clear, but I think that this is what you want: http://jsfiddle.net/howlermiller/fUSXp/2/ (try on an iPad)

It would be super simple to get this functionality using jQuery, but since you already put in some work to make it all out of CSS, I kept my answer as all CSS. I used the checkbox hack, and I tested it on an iPad to make sure that it works.

This hack works on desktop browsers too, so if you click on the box then the styling will stay, rather than going away on mouse off. That could be either a good thing or a bad thing, depending on what you’re going to do with it.

P.S. Using pure css (aka the checkbox hack) isn’t really the best way to do this. It makes your code a little less flexible and less reusable. But it does work perfectly well.

EDIT: Stop the presses, there’s a bug in Safari 5. I found it thanks to this StackOverflow question. All you have to do to fix it is to add an empty onclick to the label (yeah yeah, another hack, I know, I’m not happy about it either). In my own tests Safari 6 does not seem to have this bug, so you won’t need it unless you’re supporting Safari 5 (which, realistically, is probably a good idea right now. If you’re using this in a few months though, then you could probably use the old fiddle). Here’s the fixed jsfiddle: http://jsfiddle.net/howlermiller/fUSXp/3/