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

时间:2013-03-09 00:59:45

标签: jquery css dom mobile twitter-bootstrap

每当我点击一个带有我的移动设备(android)的按钮在twitter的boostrap按钮上,但按钮得到奇怪的样式,就像鼠标仍然结束,直到我点击另一个元素才释放。这不是应用于元素的活动类。 This is what the button looks like before clicking

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'); 


        });

并尝试在悬停时覆盖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;
 }

2 个答案:

答案 0 :(得分:9)

如果您只是为移动设备开发,那么您可以完全覆盖悬停css,例如:

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

答案 1 :(得分:5)

我通过在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;
}