2012-01-23 10 views
7

Vurguluda bazı css3 animasyonu olan bir web sayfam var ve kullanıcı bu öğelere dokunduğunda iPad (ve herhangi bir dokunma etkin aygıt) üzerinde çalışmasını sağlamak istiyorum.Dokunmatik cihazlarda vurgulu efekti nasıl taklit eder?

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:
İşte benim kod

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

Sen fare elemanları girdiğinizde Sonra stilini kaldırmak bir stil uygulamak ve css eklemek görebilirsiniz 'hover_effect' sınıfı ve fare çıkarıldığında 'hover_effect' sınıfını kaldırırım.
Dokunmatik cihazlarda da aynı şeyi nasıl yapabilirim? Tıklama etkinliğinin bir geri arama özelliği yok. Bu nedenle, tıklama gerçekleştikten sonra 'hover_effect' sınıfını kaldıramıyorum. Mousedown ve mouseup denedim ama işe yaramadı. Ben stackoverflow aradı ve bu How do I simulate a hover with a touch in touch enabled browsers? bulundu, ancak herhangi bir etkisi yoktu.
Herhangi bir fikri olan var mı?

Teşekkür
Mauro

cevap

4

deneyin $('#man').

-4

ya sen aynı etkiyi istiyorsanız veya fark kullandığınızda da aynı gider a#man:hover{....} [gibi css altında :hover sınıf ekleyebilir için benzer bu

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

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

. diff için renkler veya görüntü. Sonuçlar].

İlgili konular