2012-05-26 15 views
15

tr:hoverスタイルを削除する簡単な方法はありますか?Twitterブーストストラップ行ストライプを使ってテーブル行ハイライトを削除する

+0

あなたのテーブルには、ブートストラップ「テーブル・ストライピング」クラスを使用していますか?はいの場合は、「テーブルストライプ」クラスを考慮しないとどうなるかを調べるために、以下に追加したjsfiddlesを確認してください。 – mg1075

答えて

23

はあなたのテーブルの上に.table-stripedクラスを使用してないされた場合にのみ、右側にあります。

.table-stripedクラスを使用するとの場合、ライトグレーの色付きのストライプを持つ行にカーソルを合わせると、行のハイライト表示が消えません。

明るい灰色の行にカーソルを合わせると、行が明るい灰色から透明(白色)に変わるので、誤ってすべての明るい灰色に行ホバー効果が適用されます色のついた行。あなたはBlenderのオリジナルの答えに応じ構築し、同様のストライプの行からのホバー効果を奪う必要がある場合

は、私はあなたに別のルールを持っていると思うオーバーライド:

.table tbody tr:hover td, 
.table tbody tr:hover th { 
    background-color: transparent; 
} 


.table-striped tbody tr:nth-child(odd):hover td { 
    background-color: #F9F9F9; 
} 

良い例http://jsfiddle.net/pXWjq/

バギー例:ここ.table-ストライプクラスが考慮されて働いてjsfiddle例へのリンクがありますそして、ここに(テーブル行ホバーはまだ起こる例ですグレー行ホバーが計上されていないため、グレーの行): http://jsfiddle.net/448Rb/

+0

これはすばらしいことですが、2番目のブロックの追加の奇数ホバー状態を忘れてしまった: '.table-striped tbody tr:nth-​​child(odd):ホバーth' – xbakesx

16

オーバーライドこれらのルール:これを使用して

.table tbody tr:hover td, 
.table tbody tr:hover th { 
    background-color: #f5f5f5; 
} 

:Blenderの答え@

.table tbody tr:hover td, 
.table tbody tr:hover th { 
    background-color: transparent; 
} 
+0

これはIE8で動作しますが、他のIE8では動作しません。 – theLaw

関連する問題