引导按钮被“卡住”在移动设备上 [英] Bootstrap buttons get "stuck" down on mobile devices

问题描述

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

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 click another element. This is not the active class being applied to an element.

这是微妙但很讨厌，特别是当我尝试应用样式的按钮，他们不显示，直到我点击一个不同的元素。

It's subtle but very annoying, especially when I try to apply styles to the button they dont show up until i click on a different element.

尝试 http://twitter.github.com/bootstrap/base -css.html＃button ，然后点击按钮即可看到我的意思

Try going to http://twitter.github.com/bootstrap/base-css.html#buttons on a mobile device and click a button you'll see what i mean

我尝试使用jquery触发所有类型的事件，但是没有什么工作，这是我在我的javascript的结尾的代码片段

I tried triggering all sorts of events with jquery but nothing worked, this is a snippet i have at the END of my javascript

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


        });

并尝试覆写悬停时的css样式

and tried overriding css stylings on 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;
 }

推荐答案

javascript：

javascript:

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

css：

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

这篇关于引导按钮被“卡住”在移动设备上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！