MindGame MindGame - 8 months ago 382
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;


<table class="table table-condensed table-hover">


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