Wie benutzt man jQuery um eine CSS Regel zu deaktivieren?

Question

Hier ist eine fiddle die Situation
ich zu beschreiben, haben eine Tabelle, die Zellen, die aufleuchten, mit einer Grenze auf schweben hat:

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

Als einer von ihnen gedrückt wird, ich will es eine permanente Grenze machen oben erwähnt und während es aktiv ist (bis zum nächsten Klick), möchte ich die Beleuchtung für andere Zellen deaktivieren.

Das Problem scheint eine einfache Lösung zu haben alle Zellen eine Klasse zu geben, die die Grenze während der Aktivierung verhindert:

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

Aber es gibt eine Menge von Zellen, und ich habe Angst, dass Makeln so viele Klassen an einmal kann sich die Leistung auswirken.
Dann habe ich versucht, diesen Ansatz auch:

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

Das Problem war, dass die :hover Wähler eine Zelle nur gezielt - die, die ich an hinwies, und ich konnte nicht herausfinden, wie diese Regel zu verbreiten alle von ihnen. Und das bedeutet im Grunde, dass Sie einem HTML-Element einen Inline-Stil hinzufügen, der nicht besser ist, als eine Klasse hinzuzufügen, wenn Sie die Leistung berücksichtigen.

Wie könnte ich mein Problem lösen?

Answer 1

Hier ist eine Geige mit einer Lösung 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'); 
}) 

Fügen Sie eine Klasse auf die Tabelle, die die Hover (CSS-Regel) ermöglicht. Wenn der Benutzer auf a klickt, können Sie auch diese Klasse umschalten.

Answer 2

Wenn ich Ihre Frage richtig verstanden habe, sollte dies tun, was Sie wollen

• Auswählen einer Zelle deselektiert alle anderen Zellen und schweben deaktiviert
• eine ausgewählte Zelle klicken erneut aktiviert schweben.

$('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>