Jquery dataTable change row color

Question

I am using JQuery datatable,
I need to change the color of the row on the mouse over event (the highligthed row)
I tried:

table.display tr.even.row_selected td {
    background-color: red;
}

table.display tr.odd.row_selected td {
    background-color: blue;
}

JSFiddle

Answer 1

Try this CSS:

table.display tbody tr:nth-child(even):hover td{
    background-color: red !important;
}

table.display tbody tr:nth-child(odd):hover td {
    background-color: blue !important;
}

UPDATED jsFIDDLE DEMO

Answer 2

One of the JS snippets I write at the start of each project is to add some basic formatting to tables. Include this inside your $(function() { ... }); block

    $('table tr').mouseover(function() {
        $(this).addClass('row_selected');
    });
    $('table tr').mouseout(function() {
        $(this).removeClass('row_selected');
    });

Similarly, this bit will take away the hassle of adding odd/even markup to every row in the table, as your are building it

$('table').each(function() { $(this).find('tr:even').addClass('even'); });
$('table').each(function() { $(this).find('tr:odd').addClass('odd'); });

Answer 3

This?

table.display tbody .odd:hover {
    background-color: red !important;
}
table.display tbody .even:hover {
    background-color: blue !important;
}