MindGame MindGame - 2 years ago 761
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">

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download