Twitter Bootstrap 3 apply hover to table cells only
Using bootstrap to style my table. Is there a way to change the table-hover class so that it only selects the invisible cell and not the entire row? I've tried some work with jquery:
$('.date').hover(
function () {
$(this).addClass('active'); },
function () {
$(this).removeClass('active');
});
This successfully adds / removes the "active" class to the cell, but does not change its color. When I inspected the element, the cell was picking up the default background color, which is set when the table is colored and the "active" bootstrap property was struck out (see Figure).
The reason I use this approach is because I initially don't know what the current cell color is (cells choose a different color depending on the state when the table is colored), so I cannot know what color to indicate the function turning off the mouse.
source to share
Looking at the dev tools, bootstrap adds this property on hover over an element tr
:
.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th{
background-color: #f5f5f5;
}
What you need to do:
- Reset bootstrap style to remove the effect
hover
. - Create your own rule
hover
in the elementtd
, nottr
.
In the final, you need to add the following rules:
// add your own style on td:hover
.table-hover>tbody>tr>td:hover, .table-hover>tbody>tr>td:hover{
background-color: #f5f5f5!important; // Or any colour you like
}
// reset the default bootstrap style on tr:hover
.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th{
background-color: inherit;
}
Note. The part is !important
here to override the original rule.
Edit . If you want to keep the original hover and add another one to the actual cell, just add the first rule to the previous answer. See Alternative script.
source to share