Question

I am currently having issues making iPad work with a :hover event. To clear up what i mean i have uploaded part of the website at http://playing.everythingcreative.co.uk and I have 3 images, that when hovered over a div disappears to show text underneath but this does not work on the iPad at all. I tried:

ontouchstart="touchStart(event);"

But i don’t know enough on how it works to use it right.

Any help would be great.

Answer 1

I figured it out anyway using the example on iOS automatic hover fix? and changing:

if(navigator.platform == "iPad") {

to:

if ("ontouchstart" in document.documentElement) {

The final code:

$(document).ready(function() {
        if ("ontouchstart" in document.documentElement) {
            $("div").each(function() { // have to use an `each` here - either a jQuery `each` or a `for(...)` loop
                var onClick; // this will be a function
                var firstClick = function() {
                    onClick = secondClick;
                    return false;
                };
                var secondClick = function() {
                    onClick = firstClick;
                    return true;
                };
                onClick = firstClick;
                $(this).click(function() {
                    return onClick();
                });
            });
        }
    });