Làm thế nào để mô phỏng hiệu ứng di chuột trên các thiết bị cảm ứng?

Question

Tôi có một trang web với một số hoạt ảnh css3 trên di chuột và tôi muốn làm cho nó hoạt động trên iPad (và bất kỳ thiết bị hỗ trợ cảm ứng nào) khi người dùng chạm vào các yếu tố này.
Dưới đây là mã của tôi:

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'); 
}); 

Bạn có thể thấy rằng khi chuột vào yếu tố nào để loại bỏ phong cách sau đó áp dụng một phong cách và thêm css lớp 'hover_effect' và khi con chuột rời khỏi, tôi xóa lớp 'hover_effect'.
Làm cách nào để có thể đạt được điều tương tự trên thiết bị cảm ứng? Sự kiện nhấp chuột không có gọi lại nên tôi không thể xóa lớp 'hover_effect' sau khi nhấp chuột xảy ra. Tôi đã thử mousedown và mouseup nhưng nó không hoạt động. Tôi tìm kiếm stackoverflow và tôi tìm thấy điều này How do I simulate a hover with a touch in touch enabled browsers? nhưng nó không có bất kỳ tác dụng.
Bất kỳ ý tưởng nào?

Cảm ơn
Mauro

Answer 1

thử này

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

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

tương tự cho $('#man').

Answer 2

hoặc bạn có thể thêm :hover lớp dưới css như a#man:hover{....} [Cũng vậy nếu bạn muốn tác dụng tương tự hoặc sử dụng diff . màu sắc hoặc hình ảnh cho sự khác biệt. các kết quả].