When highlighting rows using CSS :hover, you need to be aware of the sorting class which is applied to elements in the column currently being sorted (assuming it is enabled - it is by default). This example shows how to consider this in CSS, with highlighting for each row, and a little tint for the sorting column to maintain it's visibility as the column currently being sorted upon.
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
---|---|---|---|---|
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
Gecko | Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 3.0 | Win 2k+ / OSX.3+ | 1.9 | A |
Gecko | Camino 1.0 | OSX.2+ | 1.8 | A |
Gecko | Camino 1.5 | OSX.3+ | 1.8 | A |
Gecko | Netscape 7.2 | Win 95+ / Mac OS 8.6-9.2 | 1.7 | A |
Gecko | Netscape Browser 8 | Win 98SE+ | 1.7 | A |
Gecko | Netscape Navigator 9 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Mozilla 1.0 | Win 95+ / OSX.1+ | 1 | A |
Javascript:
1 2 3 | $(document).ready( function () { $( '#example' ).dataTable(); } ); |
CSS (note that for this example the selector ".ex_highlight" is used to limit the CSS here to just this example.
.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted { background-color: #ECFFB3; } .ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted { background-color: #E6FF99; } .ex_highlight_row #example tr.even:hover { background-color: #ECFFB3; } .ex_highlight_row #example tr.even:hover td.sorting_1 { background-color: #DDFF75; } .ex_highlight_row #example tr.even:hover td.sorting_2 { background-color: #E7FF9E; } .ex_highlight_row #example tr.even:hover td.sorting_3 { background-color: #E2FF89; } .ex_highlight_row #example tr.odd:hover { background-color: #E6FF99; } .ex_highlight_row #example tr.odd:hover td.sorting_1 { background-color: #D6FF5C; } .ex_highlight_row #example tr.odd:hover td.sorting_2 { background-color: #E0FF84; } .ex_highlight_row #example tr.odd:hover td.sorting_3 { background-color: #DBFF70; }