14

Twitterのブーストラップボタンでモバイルデバイス（Android）のボタンをクリックしても、マウスがまだ上にあるようにボタンのスタイルがおかしくなり、別の要素をクリックするまでボタンが解放されません。これは、要素に適用されているアクティブなクラスではありません。 クリックする前のボタンは次のようになります

これは、クリックした後のボタンの外観です。陰影と背景に注意してください。

微妙ですが非常に面倒です。特に、ボタンにスタイルを適用しようとすると、別の要素をクリックするまで表示されません。

モバイルデバイスで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;
 }
4

2 に答える 2

9

モバイル向けに開発している場合は、ホバー css を完全にオーバーライドできます。次に例を示します。

.btn:hover {
    background-color: inherit;
}
于 2014-09-11T16:08:17.527 に答える
5

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-11T12:08:51.907 に答える