如何模拟触摸设备上的hover效果?

我有一个在hover时有一些css3动画的网页,当用户触摸这些元素时,我想让它在iPad(和任何支持触摸的设备)上工作。
这是我的代码:

HTML:

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’类。
如何在触摸设备上实现相同的function? click事件没有回调,因此在单击发生后我无法删除’hover_effect’类。 我尝试了mousedown和mouseup但它没有用。 我搜索了stackoverflow,我发现了这个如何模拟hover触摸启用浏览器? 但它没有任何影响。
有人在想吗?

谢谢
毛罗

试试这个

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

同样的$('#man').

或者你可以添加:hover在css下:hover类,如#man a#man:hover{....} [如果你想要相同的效果或使用diff也一样。 差异的颜色或图像。 结果。