javascript - 如何使用 jQuery 禁用 CSS 规则？

Question

这是一个 fiddle描述情况
我有一个表格，其中的单元格在悬停时会亮起并带有边框:

table td:hover {
  border: 2px solid #3d8b40;
}

当其中一个被按下时，我想让它有一个上面提到的永久边框，当它处于事件状态时(直到下一次单击)，我想禁用其他单元格上的照明。

这个问题似乎有一个简单的解决方案，可以给所有单元格一个类，在激活期间防止边界:

.no-border:not(.active):hover {
  border: inherit !important;
}

但是有很多单元格，我担心一次切换这么多类可能会影响性能。
然后我也尝试了这种方法:

$('td').click(function() {
  if ($(this).hasClass('active')) {
    $('table td:hover').css('border', 'inherit');
  }
  else {
    $('table td:hover').css('border', '2px solid #3d8b40');
  }
}

它的问题是 :hover 选择器只针对一个单元格——我指向的那个单元格，我不知道如何将这个规则传播到所有单元格。这基本上意味着向 HTML 元素添加内联样式，在考虑性能时这并不比添加类好。

我该如何解决我的问题？

Answer 1

这是一个带有解决方案的 fiddle https://jsfiddle.net/a8xbya33/1/

table.enable_hover td:hover {
  border: 2px solid #3d8b40;
}

<table class="enable_hover">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

$('td').click(function() {
    $(this).toggleClass('active');

  $('table').toggleClass('enable_hover');
})

将一个类添加到启用悬停的表格(CSS 规则)。当用户点击 a 时，您也可以切换此类。