title: How to simulate hover effect on touch devices?
body: <p>I have a web page with some css3 animation on hover and I would like to make it work on iPad (and any touch enabled device) when the user touch these elements.<br>
  Here's my code:</p>
  
  <p>html:  </p>
  
  <pre><code>&lt;div id="headBlock"&gt;
      &lt;a id="arm"&gt;&lt;/a&gt;
      &lt;div id="head"&gt;
          &lt;div id="blink"&gt;&lt;/div&gt;
          &lt;div id="lid"&gt;&lt;/div&gt;
          &lt;div id="man"&gt;&lt;/div&gt;
          &lt;a id="man-arm"&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>js:  </p>
  
  <pre><code>//arm
  $('#arm').hover(function(){
      $(this).removeAttr('style').css('bottom','244px');
      $(this).addClass('hover_effect');
  
      }, function(){
          $(this).removeClass('hover_effect');
  });
  
  //man arm
  $('#man').hover(function(){
      $('#man-arm').removeAttr('style');
      $('#man-arm').addClass('hover_effect');
  
      }, function(){
          $('#man-arm').removeClass('hover_effect');
  });
  </code></pre>
  
  <p>You can see that when the mouse enter the elements I remove the style then apply a style and add the css class 'hover_effect' and when the mouse leaves I remove the 'hover_effect' class.<br>
  How can I achieve the same thing on touch devices? The click event doesn't have the a callback so I cannot remove the 'hover_effect' class after the click happens. I tried mousedown and mouseup but it didn't work. I searched stackoverflow and I found this <a href="https://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers">How do I simulate a hover with a touch in touch enabled browsers?</a> but it didn't have any effect.<br>
  Any idea anyone?</p>
  
  <p>Thanks<br>
  Mauro</p>