Кнопки Bootstrap «застряли» на мобильных устройствах

Question

Всякий раз, когда я нажимаю кнопку с мобильным устройством (Android) на кнопке twitter boostrap, но кнопка получает странное стилирование, так как мышь все еще закончилась и не отпустится, пока я не щелкнул другой элемент. Это не активный класс, применяемый к элементу.

Это тонкое, но очень раздражает, особенно когда я пытаюсь применить стили к кнопке они не показывают вверх, пока я не нажму на другой элементе.

Попробуйте собираюсь http://twitter.github.com/bootstrap/base-css.html#buttons на мобильном устройстве и нажмите кнопку вы увидите, что я имею в виду

Я попытался запуском всех видов событий с JQuery, но ничего не получалось, это фрагмент я имею в КОНЦЕ мой Javascript

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


     }); 

и попытался перекрывая Css стилистики по наведению

.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

Я установил эту проблему путем добавления класса к кнопке на touchhend, а затем переопределить фоновое положение начальной загрузки.

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

Если вы только разработки для мобильных устройств, то вы можете просто переопределить парения CSS в целом, например:

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