如何模擬觸摸設備上的懸停效果？

我有一個懸停的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

如何模擬觸摸設備上的懸停效果？

回答

相關問題