Bootstrap düğmeleri, mobil cihazlarda "takıldı" durumuna düşüyor

Question

Mobil aygıtımla (android) bir twitter boostrap düğmesinde bulunan bir düğmeyi tıklattığımda ancak düğmenin tıklatıldığında fare hala bitti ve ben başka bir tıklayana kadar serbest kalmaz öğesi. Bu, bir öğeye uygulanan aktif sınıf değildir.

O ince ama çok sinir bozucu , özellikle onlar ben farklı bir eleman tıklayana kadar göstermek dont düğmeye stilleri uygulamak çalıştığınızda.

i jquery ile her türlü olaya tetikleme çalıştı ama hiçbiri işe yaramadı

demek istediğimi göreceksiniz bir mobil cihazda http://twitter.github.com/bootstrap/base-css.html#buttons olacak deneyin ve bir düğmesine tıklayın, bu sonunda ben sahip snippet'idir benim javascript

$(document).on('tapclick', '.btn', function() { 
      $(this).blur(); 
      $(this).trigger('mouseup'); 


     }); 

ve ben Alıcı düğmesini bir sınıf ekleyerek bu sorunu sabit vurgulu

.btn a:hover,.btn a:link,.btn a:visited,.btn a:active{ 
text-decoration: none !important; 
cursor: default !important; 
background-color: transparent !important; 
background-image: none !important; 
} 

Answer 1

üzerine css stylings geçersiz kılma çalıştı olayı etkinleştirme ve ardından varsayılan önyükleme arka planı konumunu geçersiz kılma.

javascript:

$("button").on("touchstart", function(){ 
    $(this).removeClass("mobileHoverFix"); 
}); 
$("button").on("touchend", function(){ 
    $(this).addClass("mobileHoverFix"); 
}); 

css: Sadece mobil cihazlar için geliştiriyorsanız

.mobileHoverFix:hover, 
.mobileHoverFix.hover{ 
    background-position: 0 0px; 
} 

Answer 2

o zaman basitçe, örneğin tamamen vurgulu css geçersiz olabilir:

.btn:hover { 
    background-color: inherit; 
}