title: How to use jQuery to disable a CSS rule?
body: <p>Here's a <a href="https://jsfiddle.net/a8xbya33/" rel="nofollow noreferrer">fiddle</a> to describe the situation<br>
  I have a table which has cells that light up with a border on hover:</p>
  
  <pre><code>table td:hover {
    border: 2px solid #3d8b40;
  }
  </code></pre>
  
  <p>When one of them is pressed, I want to make it have a permanent border mentioned above and while it's active (until the next click), I want to disable the lighting on other cells.</p>
  
  <p>The problem seems to have a simple solution to give all cells a class that prevents the border during activation:</p>
  
  <pre><code>.no-border:not(.active):hover {
    border: inherit !important;
  }
  </code></pre>
  
  <p>But there is a lot of cells and I'm afraid that toggling so many classes at once may impact the performance.<br>
  Then I also tried this approach:</p>
  
  <pre><code>$('td').click(function() {
    if ($(this).hasClass('active')) {
      $('table td:hover').css('border', 'inherit');
    }
    else {
      $('table td:hover').css('border', '2px solid #3d8b40');
    }
  }
  </code></pre>
  
  <p>The problem with it was that the <code>:hover</code> selector only targeted one cell - the one I was pointing at, and I couldn't figure out how to spread this rule to all of them. And that basically means adding an inline style to an HTML element, which is not better than adding a class when considering performance.</p>
  
  <p>How could I solve my problem?</p>