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

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"类
如何在触摸设备上实现同样的功能？单击事件没有回调，因此在单击发生后，我无法删除"hover_effect"类。我试过鼠标放下和鼠标抬起，但都没用。我搜索了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

或者您可以在类似a#man:hover{....}的css下添加:hover类[如果您想要相同的效果或使用不同的颜色或图像来获得不同的结果，也可以这样做]。