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

每当我点击一个按钮与我的移动设备（android）在twitter boostrap按钮，但按钮变得怪异的样式，像鼠标仍然结束，直到我点击另一个元件。这不是应用于元素的活动类。 This is what the button looks like before clicking Bootstrap按钮在移动设备上“卡住”

This is what the button looks like after clicking notice the shading and background

这是微妙的，但很烦人，尤其是当我尝试样式应用到他们不露面，直到我不同的元素上点击按钮。

尝试将http://twitter.github.com/bootstrap/base-css.html#buttons在移动设备上，点击一个按钮，你就会明白我的意思

我试图触发各种事件与jQuery但是毫无效果，这是在结束时的片断，我有我的javascript

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


     });

，并试图悬停

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

来源

2013-03-09 Brian

覆盖CSS花式我通过在添加类的按钮固定这个问题touchend事件，然后覆盖默认的引导程序背景位置。

的javascript：

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

CSS：

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

来源

2013-03-11 12:08:51 Casey

谢谢！这一直在窃听我一段时间 – Brian 2013-03-11 22:49:37

如果你只是为移动开发，那么你可以简单地完全覆盖悬停的CSS，例如：

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

来源

2014-09-11 16:08:17

这应该是批准的答案。它很干净，只使用CSS。您可能必须调整继承语句以匹配非悬停状态的确切样式 – newbreedofgeek 2016-05-13 00:21:03

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

回答

相关问题