タッチデバイスのホバー効果をシミュレートする方法は？

Question

私は、ホバリングのcss3アニメーションを持つWebページを持っています。ユーザーがこれらの要素に触れると、iPad（そしてタッチ対応デバイス）上で動作させたいと思います。

HTML：：

<div id="headBlock"> 
    <a id="arm"></a> 
    <div id="head"> 
     <div id="blink"></div> 
     <div id="lid"></div> 
     <div id="man"></div> 
     <a id="man-arm"></a> 
    </div> 
</div> 

JS：
はここに私のコードです

//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'); 
}); 

あなたはマウスが要素に入ったとき、私は、スタイルを削除するスタイルを適用し、CSSを追加していることがわかりますクラス 'hover_effect'とマウスが私は 'hover_effect'クラスを削除します。
タッチデバイスで同じことをどのように達成できますか？ clickイベントはコールバックを持たないため、クリック後に 'hover_effect'クラスを削除することはできません。私はmousedownとmouseupを試みたが、うまくいかなかった。私はstackoverflowを検索し、これはHow do I simulate a hover with a touch in touch enabled browsers?が見つかりましたが、何の効果もありませんでした。
誰にでも分かりますか？

おかげ
マウロ

Answer 1

てみ$('#man').

Answer 2

またはあなたが同じ効果をしたいか、diffを使用した場合と同じになりますa#man:hover{....} [のようにCSSの下:hoverクラスを追加することができため、同様この

$('#arm').bind('touchstart', function() { 
     $(this).removeAttr('style').css('bottom','244px'); 
     $(this).addClass('hover_effect'); 
}); 

$('#arm').bind('touchend', function() { 
     $(this).removeClass('hover_effect'); 
}); 

。 diffのための色や画像。結果]。