更改懸停在Bootstrap中的表格和選擇顏色？

我有一個使用class table-hover的表。我想使用不同的顏色來懸停和選擇（通過單擊）單元格。更改懸停在Bootstrap中的表格和選擇顏色？

此外，如果所選擇的小區徘徊，然後選擇了所選單元格的顏色應該出現

我已經使用了懸停顏色下面的代碼：

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

但似乎指定的顏色越來越用於懸停和選擇單元格。

我非常喜歡引導。請有人可以幫助我瞭解如何使用不同的顏色，懸停和選擇

來源

2016-08-17 user2713255

嘗試用td替換tr，並在此css選擇器中刪除.bg-info。 – Damiano

您應該編寫完整的代碼html以及css.please提供這個問題的提示 – mean

要得到的鼠標懸停事件：

<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： -

.bgtd{ 
    background-color:#ff0000; 
}

要獲得點擊的背景色上選擇TD的： - fiddle

來源

2016-08-17 12:37:12 mean

默認.active和:hover狀態以及上下文的變體可以發現起點在Bootstrap 3 CSS文件中的第2337行（如果我沒有弄錯）。

你會發現它是.table > thead > tr > td.active和其他（下面）是其他上下文變體（成功，信息等），那麼這是編輯背景顏色的正確位置。

CSS默認.active狀態：

.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:hover狀態：

.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與上下文變種（成功，信息等）或者你自己想要的變種，那麼它會變成類似.table > thead > tr > td.variant。

或者如果您知道如何使用Less，那麼它會容易很多因爲它已經包含在它們的源代碼中。該文件在mixins文件夾內命名爲 table-row.less。

來源

2016-08-17 13:00:43

更改懸停在Bootstrap中的表格和選擇顏色？

回答

相關問題