How do I avoid hover event to fire in iPhone and iPad?

Question

I had added an effect on hoverEnter and hoverLeave on my Divs assuming that these events wont fire on iOS devices. But on iOS devices the hoverEnter and click event fire and the hoverEnter effect is maintained. I don't want these hover events to fire on mobile devices. What should I do. I am attaching event via Javascript and the hover event is attached to the div before click event.

Answer 1

To emulate the hover you simply add an event listener to the element you want to have a hover event, you can use touchstart and touchend events instead of using hover

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