Bootstrap按钮在移动设备上“卡住”

每当我点击一个带有我的移动设备（android）的按钮在twitter的boostrap按钮上，但按钮得到奇怪的样式，就像鼠标仍然结束，直到我点击另一个元素才释放。 这不是应用于元素的活动类。

它很微妙，但非常烦人，特别是当我尝试将样式应用到他们不会显示的按钮，直到我点击不同的元素。

尝试在移动设备上访问http://twitter.github.com/bootstrap/base-css.html#buttons并单击一个按钮，你会看到我的意思

我尝试使用jquery触发各种事件但没有任何效果，这是我在我的javascript结束时的片段

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

并尝试在hover时重写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

我通过在touchend事件的按钮上添加一个类来修复此问题，然后覆盖默认的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

如果您只是为移动开发，那么您可以完全覆盖hovercss，例如：

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