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

这是一个解决方案的小提琴 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时，您也可以切换此类。

如何使用jQuery禁用CSS规则？

1 个答案: