Geek Answers Handbook

When loading, the load table is disabled for the selected row

I use bootstrap for on-hover effect for table rows. But I want to remove the hover effect when selecting a table row. I set the class (select-row) using JavaScript when selecting a row. I don't seem to be working for me. I use the not condition in 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>
+4
source share
3 answers

To ensure that the selected line background does not change, you need to specifically overwrite the existing hover style.

Bootstrap aims the background tdto freeze, not tr.

It works:

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

Demo script

+5
source

Jack (Chromium 62.0.3202.94). , , - , CSS :not(). , tableRowHover , . CSS

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

tableRowHoverOff <tr>, .

: http://jsfiddle.net/mk319zzm/

0

jquery solution to this problem

$('tr').select(function()
{    
 $(this).removeClass('classtoremove'); 
});

you can now apply the .css method to the $ (this) object

-2
source

More articles:


All Articles