jquery - 表の行にカーソルを合わせると表示される Twitter ブートストラップボタン

Question

各行の最後のセルにボタングループがある Twitter ブートストラップテーブルがあります。

テーブルセルのボタングループ

これらのボタンは、ユーザーが行にカーソルを合わせたときにのみ表示されます。また、ユーザーが (ボタングループ自体ではなく) 行の上にカーソルを置いたときにアイコンのみが表示され、ボタングループの上にカーソルを置いたときにアイコンがボタンのように表示される必要があります。

ここに画像の説明を入力

htmlこれは、私が使用するレイアウトのフィドルですhttp://jsfiddle.net/hDafj/

そして、これは私がすでにやろうとしたことですhttp://jsfiddle.net/hDafj/2

score 10 · Accepted Answer

これを行うには、CSS

CSS

table.table tr td div.btn-group { display:none;}
table.table tr:hover td div.btn-group { display:inline-block;}

これが更新されたフィドルです

score 0 · Accepted Answer

これを試してみてくださいhttp://jsfiddle.net/guyisra/hDafj/5/始めるのに役立つかもしれません（自分でできるアライメントを修正する必要があります

js を使用して、行ホバー用のクラスと css を追加します

$(".btn-group a").hover(function () {
    $(this).addClass("btn");
}, function () {
    $(this).removeClass("btn");
}

);

CSS

.btn-group {
    visibility:hidden;
}
table tr:hover .btn-group {
    visibility:visible;
}

jquery - 表の行にカーソルを合わせると表示される Twitter ブートストラップ ボタン