iPad Javascript Hover

When testing your website on a tablet you may find that your fancy hover effects do not work. As mentioned previously tablet users will be using their fingers, inparticularly clicking.This raises three issues:

Is the element obviously clickable/hoverable? Users tracking text with their mouse whilst reading does not happen any longer on a tablet.
Tablet users will need to click and un/click the element
Laptop/Desktop users will still expect certain elements to react to a hover.

Please Note: The code examples below use the mootools framework. We recommend that you watch the tutorial video which gives an overview of the code.

Click here to view our demo

The Problem

The following example shows a classic hover scenario where the child element (Another Test) is hidden unless the user hovers on its parent element (Testing).

The CSS

ul li { display: inline-block; padding: 20px; 
        background-color: black; color: white; }
ul li:hover { background-color: red; }
ul li ul { display: none; }
ul li:hover ul,ul li.over ul { display: block; }

The HTML

<h1>Standard Test</h1>
<ul>
  <li>Testing
    <ul>
      <li>Another test</li>
    </ul>
  </li>
</ul>

As demo'ed in the tutorial video the hover does not take effect on a tablet device. In this article we will look at two different methods to solve this problem.

Solution One - Click event
The first solution is to use a standard click event to add an additional class to the item you would ordinarilly hover over. The advantage of this method is that it will work across multiple platforms and could replace the original hover attribute.

The Javascript


window.addEvent('domready',function() {
  $("iosClick").addEvents({
    click: function() {
      $("iosClick").addClass('over');
    }
  });
});

In order for the javascript to work you will need to add the id "iosClick" to the element that you would like to interact with like so:

<li id='iosClick'>Testing

Solution two - Tablet touchstart/touchend event
Whilst solution one is effective it does not utilize events native to the tablet. The mootools library supports the tablet touchstart and touchend events. Using these events we can create real touch functionality which mimics the hover effect when the user touches the screen and removes the effect when they move their finger away.

The Javascript


$("iosTouch").addEvents({
  touchstart: function() {
   $("iosTouch").addClass('over');
  },
  touchend: function() {
   $("iosTouch").removeClass('over');
  }
});

In order for the javascript to work you will need to add the id "iosTouch" to the element that you would like to interact with like so:

<li id='iosTouch'>Testing

Things to consider
If you do not want to use the DOM's ID as the selector you could use mootools $$ selector to select elements with a specific class etc. The CSS would be more involved for this, but in certain scenarios would be a better solution.

I hope you found this tutorial useful
If you did please be sure to click the like button below and +1 us on Google. You can also find us on facebook and Youtube.