Fixing the Hover event on the iPad/iPhone/iPod

Note: This information may now be out of date. It was published in 2010!

In truth it’s not a fix as the iPad doesn’t have the ability to hover.

Apple has developed extra events to replace hover on it’s mobile touch devices. I’ve recently been working a lot on the iPad and came across the problem of hovered navigation not showing up. It’s a css :hover event that fires through a CSS selector on an <a> element with no href attribute.

To emulate the hover we simply add an event listener to the element we want to have a hover event. In jQuery we do this (make sure you insert it into document.ready):

//ipad and iphone fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $(".menu li a").click(function(){
        //we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event
        //strange
    });
}

That should enable the element to be touched, and stimulate and iPad hover event.

If you’re having problems getting hovered elements to fire you could also try using touchstart or touchend which is probably a better method depending on what you’re trying to accomplish:


if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $(".menu li a").bind('touchstart', function(){
        console.log("touch started");
    });

    $(".menu li a").bind('touchend', function(){
        console.log("touch ended");
    });

}