title: Forcefully remove hover css effect of element inherited from remote css library
body: <p>I'm using Semantic UI library, and my <code>&lt;tr&gt;</code> table elements have a hover effect on them from the <code>"selectable"</code> class on the table.</p>
  
  <p>But I would like to disable this hover on specific rows(when they enter edit mode) without having to edit the css files (As my scope is only html/javascript, I'm only trying to mend an old issue)</p>
  
  <p>I tried using <code>pointer-events:none;</code> but in my case there are other buttons inside the <code>&lt;tr&gt;</code> and they got disabled</p>
  
  <p>Javascript event on the rows :</p>
  
  <pre><code>$('body').on('click', '#edit_card table tbody tr .link.icon.edit', function(){
      var row = $(this).closest('tr');
      switch_row_to_editing_mode(row);
    })
  </code></pre>
  
  <p>CSS styling from the element inspector :</p>
  
  <p><a href="https://i.stack.imgur.com/gx2LU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gx2LU.png" alt="enter image description here"></a></p>