jQueryを使用してCSSルールを無効にする方法は？ここ

Question

は、私がホバー上の国境に点灯した細胞を持つテーブルを持っている状況
を記述するためfiddleです：

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

そのうちの一つが押されたとき、私はそれが永久的な境界線を持つようにしたいですアクティブになっている間（次のクリックまで）、他のセルの照明を無効にしたいと思います。

は

問題は、すべての細胞に活性化の間に境界線を防ぎクラス与えるために簡単な解決策があるようです：

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

をしかし、細胞がたくさんあると私は怖いことで、非常に多くのクラスをトグル一度パフォーマンスに影響を与える可能性があります。
は、その後、私はまた、このアプローチを試してみました： - 私が指していた1、私はこのルールを普及する方法を見つけ出すことができませんでした

$('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をクリックすると、このクラスも切り替えることができます。私が正しくあなたの質問を理解している場合

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>