title: Jquery datatable with strip and hover
body: <p>I have created a jquery datatable with strip <a href="https://datatables.net/examples/styling/stripe.html" rel="nofollow noreferrer">Strip Example</a>. I want to apply a different background color for hover.</p>
  
  <p>CSS:</p>
  
  <pre><code>.selected {
      background-color:#71d1eb;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$('#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
      }
  });
  </code></pre>
  
  <p>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?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The problem is not the odd class. I tried:</p>
  
  <pre><code>$(this).parents('tr').removeClass('odd');
  $(this).parents('tr').addClass('selected');
  </code></pre>
  
  <p>The odd class is removed and the selected class added but still the gray backgroud.</p>
  
  <p>The problem is the <code>table-striped</code> class.</p>
  
  <p><strong>Edit 2</strong></p>
  
  <p>I tried:</p>
  
  <pre><code>$(this).parents('tr').css("cssText", "background-color:#71d1eb !important;");
  </code></pre>
  
  <p>This resulted in:</p>
  
  <pre><code>&lt;tr role="row" class="odd" style="background-color: rgb(113, 209, 235) !important;"&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>But the selected color is not applied.</p>