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