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

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>

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 и обнаружил, что Как имитировать зависание в браузерах, поддерживающих сенсорный ввод? , но это не дало никаких результатов.
Любая идея кто-нибудь?

Спасибо
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{....} [то же самое, если вы хотите тот же эффект или использовать diff.цвета или изображения для сравненияРезультаты].