Jquery datatable with strip and hover

I have created a jquery datatable with strip Strip Example. I want to apply a different background color for hover.

CSS:

.selected {
    background-color:#71d1eb;
}

JavaScript:

$('#basicTable tbody').on('mouseover', 'td', function () {
    if ($(this).parents('tr').hasClass('selected')) {
        $(this).parents('tr').removeClass('selected');
    } else {
        //Remove For Multi Select
        table.$('tr.selected').removeClass('selected');                   
        $(this).parents('tr').addClass('selected');                    

        //$(this).parents('tr').css("background-color", "yellow");// Not Working
    }
});

It is working on even rows (white background), but with odd rows (gray background) the row has the class selected applied but the background is not changed. Have I missed something?

EDIT

The problem is not the odd class. I tried:

$(this).parents('tr').removeClass('odd');
$(this).parents('tr').addClass('selected');

The odd class is removed and the selected class added but still the gray backgroud.

The problem is the table-striped class.

Edit 2

I tried:

$(this).parents('tr').css("cssText", "background-color:#71d1eb !important;");

This resulted in:

<tr role="row" class="odd" style="background-color: rgb(113, 209, 235) !important;"></tr>

But the selected color is not applied.