I pulsanti di avvio si bloccano sui dispositivi mobili

Question

Ogni volta che faccio clic su un pulsante con il mio dispositivo mobile (android) su un pulsante twitter boostrap ma il pulsante ottiene uno stile strano come il mouse è ancora finito e non viene rilasciato finché non faccio clic su un altro elemento. Questa non è la classe attiva che viene applicata a un elemento.

E 'sottile, ma molto fastidioso, soprattutto quando si tenta di applicare stili al pulsante essi non mostrano fino clicco su un elemento diverso.

provare ad andare a http://twitter.github.com/bootstrap/base-css.html#buttons su un dispositivo mobile e clic su un pulsante vedrete cosa intendo

ho provato innescando tutti i tipi di eventi con jQuery, ma niente ha funzionato, si tratta di un frammento di codice che ho al FINE il mio javascript

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


     }); 

e ha cercato sovrascrivendo stylings css al passaggio del mouse

.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

ho risolto questo problema con l'aggiunta di una classe per il pulsante sul toccare l'evento e quindi ignorare la posizione predefinita dello sfondo di bootstrap.

javascript:

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

css:

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

Answer 2

Se sono solo sviluppando per i dispositivi mobili, allora si può semplicemente ignorare il css hover del tutto, ad esempio:

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