Making ‘mouseover’ event work on an iPad

Because of the way Safari on iOS creates events to emulate a mouse, some of your web page elements may not behave as expected on iOS. In particular, some elements that only use mouseover handlers need to be changed because iOS doesn’t recognize them as clickable elements, such as the div below. As the image-container div is not clickable in iOS, the corresponding mouseover event is not fired.

<div class="image-container">
$('.image-container').live('mouseover', function(){
     //...
});

On an iPad mouse events are delivered in the same order you’d expect in other web browsers. As illustrated below, if the user taps a nonclickable element, no events are generated. If the user taps a clickable element, events arrive in the following order: mouseover, mousemove, mousedown, mouseup, and click. The mouseout event occurs only if the user taps on another clickable item.

iossingletap

To make the div clickable one just needs to add a dummy onclick handler, so that Safari on iOS recognizes the div element as a clickable element. Now the mouseover event is fired on an iPad whenever the user taps the image-container div.

<div class="image-container" onclick = "void(0)">