title: Bootstrap table on hover disable for selected row
body: <p>I'm using bootstrap for the on-hover effect for my table rows. But I want to remove the on-hover effect when a table row is selected. I set a class (select-row) using JavaScript when a row is selected. Does not seem to be working for me.  I'm using the not clause in the css.</p>
  
  <p>My css:</p>
  
  <pre><code>.table-hover &gt; tbody &gt; tr:not(.select-row):hover &gt; td, 
  .table-hover &gt; tbody &gt; tr:not(.select-row):hover &gt; th {
      background-color: #f5fafe;
      color: black;
  }
  
  tr.select-row {
      background-color: #bddef9;
  }
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;table class="table table-condensed table-hover"&gt;
     &lt;tr&gt;
         &lt;td&gt;xxx&lt;/td&gt;
         &lt;td&gt;xxx&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>