Issue with ios hover event

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.

yeah basically...what i want is for the :hover event to act as a fadeout/fadein event when on ios — Joseph Gregory, Aug 28 '12 at 22:44
I guessed that otherwise i wouldn't be asking the question lol. I have found this which is specific for iPad but now my next issue will be to make it work for all touch screen devices http://stackoverflow.com/questions/5507964/ios-automatic-hover-fix — Joseph Gregory, Aug 28 '12 at 22:50
How exactly is **hover** supposed to work on an ipad without a mouse? — Bot, Aug 28 '12 at 22:52
@Bot what I want it to do is work as a click when on a touch screen — Joseph Gregory, Aug 28 '12 at 22:54
If you've ever used a website that has hover event, you will note that the first touch activates the hover, and the 2nd touch clicks. I assume the OP wants this effect. — zenkaty, Aug 28 '12 at 22:54

score 1 · Accepted Answer · edited May 23 '17 at 10:24

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();
                });
            });
        }
    });

Issue with ios hover event

1 Answers1