更改悬停在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中的表格和选择颜色？

回答

相关问题