ブートストラップの表の上にカーソルを置き、選択色を変更しますか？

Question

私はクラステーブルホバーを使用するテーブルを持っています。私は、ホバーとセルの選択（クリックによる）に異なる色を使用したいと思います。

.table-hover > tbody > tr.bg-info:hover { 
    background-color: #d9edf7; 
} 

しかし、指定された色がなっているようです：選択したセルが推移した場合

また、選択したセルのために選ばれた色は、私がホバー色のため、次のコードを使用している

を表示されますホバーとセルの選択の両方に使用されます。

私は非常にブートストラップのスターターです。誰かがホバーのイベントを取得するにはホバーおよび選択

Answer 1

に異なる色を使用する方法についての私を助けることができるしてください：

<table> 
     <tbody> 
     <tr> 
      <td class="bg-info">aaa</td> 
      <td class="bg-info">bbb</td> 
     </tr> 
     </tbody> 
     </table> 

    .bg-info:hover { 
     background-color: #d9edf7; 
    } 

確認してください、それはあなたのために働いてか、変更 ホバーしたいされています - fiddleを

HTML： -

<table> 
<tbody> 
<tr> 
    <td class="bg-info">aaa</td> 
    <td class="bg-info">bbb</td> 
</tr> 
</tbody> 
</table> 

のjQuery： -

$(document).ready(function(){ 

$('.bg-info').click(function(){ 
$('.bg-info').removeClass('bgtd'); 
$(this).addClass('bgtd'); 
}) 

}) 

CSS： - TDを選択した上で

.bgtd{ 
    background-color:#ff0000; 
} 

は、クリックの背景色を取得するには： - fiddle

Answer 2

デフォルト.activeと:hover状態だけでなく、文脈のバリアントは、開始を見つけることができますブートストラップ3 CSSファイルの2337行目（私が間違っていない場合）

.table > thead > tr > td.activeと残りの部分は、他のコンテキストバリアント（成功、情報など）ですので、背景色を編集するのに適しています。あなただけの文脈のバリアント（成功、infoなど）で.activeを交換する必要があります

.table-hover > tbody > tr > td.active:hover, 
.table-hover > tbody > tr > th.active:hover, 
.table-hover > tbody > tr.active:hover > td, 
.table-hover > tbody > tr:hover > .active, 
.table-hover > tbody > tr.active:hover > th { 
    background-color /* background color for default .active:hover state */ 
} 

：デフォルト.active:hover状態のため

.table > thead > tr > td.active, 
.table > tbody > tr > td.active, 
.table > tfoot > tr > td.active, 
.table > thead > tr > th.active, 
.table > tbody > tr > th.active, 
.table > tfoot > tr > th.active, 
.table > thead > tr.active > td, 
.table > tbody > tr.active > td, 
.table > tfoot > tr.active > td, 
.table > thead > tr.active > th, 
.table > tbody > tr.active > th, 
.table > tfoot > tr.active > th { 
    background-color /* background color for default .active state */ 
} 

CSS：デフォルト.active状態のため

CSSまたは自分の望むバリアントを入力すると、.table > thead > tr > td.variantのようになります。

また、Lessで作業する方法が分かっていれば、すでにソースコードに含まれているので、より簡単に になる可能性があります。このファイルはmixinsフォルダ内に table-row.lessと名前が付けられています。