MindGame MindGame - 5 months ago 286
CSS Question

Bootstrap table on hover disable for selected row

I'm using bootstrap for the on-hover effect for my table rows. But I want to remove the on-hover effect when a table row is selected. I set a class (select-row) using JavaScript when a row is selected. Does not seem to be working for me. I'm using the not clause in the css.

My css:

.table-hover > tbody > tr:not(.select-row):hover > td,
.table-hover > tbody > tr:not(.select-row):hover > th {
background-color: #f5fafe;
color: black;
}

tr.select-row {
background-color: #bddef9;
}


Html:

<table class="table table-condensed table-hover">
<tr>
<td>xxx</td>
<td>xxx</td>
</tr>
</table>

Answer

In order for the selected row background not to change, you need to specifically overwrite the existing hover style.

Bootstrap targets the td background on hover rather than tr.

This works:

.table-hover > tbody > tr.select-row:hover > td,
.select-row > td {
    background-color: #bddef9;
}

Demo Fiddle