Jak symulować efekt hover na urządzeniach dotykowych?

Question

Mam stronę internetową z animacją css3 po najechaniu myszą i chciałbym, aby działała na iPadzie (i dowolnym urządzeniu obsługującym dotyk), gdy użytkownik dotknie tych elementów.
Oto mój kod:

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

Widać, że kiedy wchodzi mysz elementy usunąć styl następnie zastosować styl i dodać css klasa "hover_effect", a gdy mysz opuszcza, usuwam klasę "hover_effect".
Jak uzyskać to samo na urządzeniach dotykowych? Zdarzenie click nie ma wywołania zwrotnego, więc nie mogę usunąć klasy "hover_effect" po kliknięciu. Próbowałem mousedown i mouseup, ale to nie działało. Przeszukałem stackoverflow i znalazłem to How do I simulate a hover with a touch in touch enabled browsers?, ale nie miało to żadnego efektu.
Każdy pomysł?

Dzięki
Mauro

Answer 1

spróbować

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

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

podobnie do $('#man').

Answer 2

lub można dodać :hover klasę pod css jak a#man:hover{....} [sama idzie, jeśli chcesz tego samego efektu lub użyć diff . kolory lub obraz dla porównania. wyniki].