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

我有一个悬停的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'类。我尝试了mousedown和mouseup，但没有奏效。我搜索了stackoverflow，我发现这个How do I simulate a hover with a touch in touch enabled browsers?但它没有任何效果。
任何想法的人？

感谢
莫罗

来源

2012-01-23 Mauro74

试试这个

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

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

同样，对于$('#man').

来源

2012-01-23 10:42:48

-4

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

来源

2012-12-19 22:12:10

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

回答

相关问题