Bootstrap table on hover disable for selected row

Question

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 1

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

Answer 2

Jack's solution does not work for me (Chromium 62.0.3202.94). What I found working is something that uses the CSS :not() selector. So you give the class tableRowHover as class for the table to enable a fancy mouse-over effect. It's defined in the CSS file as

.tableRowHover tbody tr:not(.tableRowHoverOff):hover td { .... }

and then you can use the class tableRowHoverOff for every <tr> where you want to explicitly disable it.

Fiddle Demo: http://jsfiddle.net/mk319zzm/