Кнопки Bootstrap "застревают" на мобильных устройствах

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

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

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

Я пробовал запускать всевозможные события с jquery, но ничего не работало, это фрагмент, который у меня есть в END моего javascript

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


        });

и попробовал переопределить стили CSS в режиме hover

.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;
 }

Ответ 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;
}

Ответ 2

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

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