如何使用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

这里有一个拨弄解决 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规则）的表。当用户点击一个，你也可以切换这个类。

Answer 2

如果我理解正确你的问题，这应该做你想做的

• 选择小区取消选择所有其他细胞和禁用悬停
• 单击选中的单元格重新启用悬停。

$('table').on('click','td', function(e){ 
 
    let td = $(this).closest('td'), 
 
     table = $(this).closest('table'); 
 
    if (td.hasClass('active')) { 
 
    td.toggleClass('active'); 
 
    table.toggleClass('active'); 
 
    } else { 
 
    table.find('td').removeClass('active'); 
 
    table.addClass('active'); 
 
    td.addClass('active'); 
 
    } 
 
})

table td, 
 
table.active td:not(.active){ 
 
    border: 2px solid transparent; 
 
} 
 
table td:hover, 
 
table td.active { 
 
    border-color: #3d8b40; 
 
} 
 

 
/* just for SO, not needed */ 
 
table td { padding: 1rem; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    </tr> 
 
</table>