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按鈕在移動設備上「卡住」

回答

相關問題