如何模拟触摸设备上的悬停效果？

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,我发现了这个如何使用触摸启用浏览器来模拟悬停？但它没有任何效果.
任何想法的人？

谢谢
毛罗

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').