Bootstrap buttons get “stuck” down on mobile devices

Question

Whenever I click a button with my mobile device (android) on a twitter boostrap button but button gets odd styling like the mouse is still over and doesn\'t release until I

Answer 1

I fixed this problem by adding a class to the button on the touchend event and then overriding the default bootstrap background position.

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

If you are just developing for mobile then you could simply override the hover css altogether, for example:

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