Как имитировать эффект зависания на сенсорных устройствах?

Question

У меня есть веб-страница с анимацией css3 при наведении курсора, и я хотел бы, чтобы она работала на 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> 

ЯШ:

//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 class 'hover_effect', и когда мышь уходит, я удаляю класс hover_effect.
Как я могу добиться того же самого на сенсорных устройствах? Событие клика не имеет обратного вызова, поэтому я не могу удалить класс «hover_effect» после нажатия. Я попробовал mousedown и mouseup, но это не сработало. Я искал stackoverflow, и нашел это How do I simulate a hover with a touch in touch enabled browsers?, но это не повлияло.
Любая идея?

Благодаря
Mauro

Answer 1

попробовать это

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

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

аналогично для $('#man').

Answer 2

или вы можете добавить :hover класс под CSS, как a#man:hover{....} [То же самое относится, если вы хотите, тот же эффект, или использовать дифф , цвета или изображения для разницы. Результаты].