Rimuovere il comportamento CSS ": hover" dall'elemento

Ho CSS che cambia la formattazione quando passi il mouse sopra un elemento.

HTML:

<div class="test"> blah </div>

CSS:

.test:hover {  border: 1px solid red; }

In alcuni casi non voglio applicare CSS al passaggio del mouse. Un modo sarebbe rimuovere semplicemente la classe CSS dal div usando jQuery, ma ciò spezzerebbe altre cose poiché utilizzo anche quella classe per formattare i suoi elementi figlio.

Questo mi ha portato a porre una domanda: esiste un modo per rimuovere lo stile CSS "hover" da un elemento?

Vorrei usare due classi. Mantieni la tua classe di test e aggiungi una seconda classe chiamata testhover che aggiungi solo a quelli che vuoi passare con il mouse - insieme alla classe di test. Questo non è direttamente quello che hai chiesto, ma senza più contesto sembra la soluzione migliore ed è probabilmente il modo più pulito e semplice di farlo.

Esempio:

.test {  border: 0px; }
.testhover:hover {  border: 1px solid red; }

<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test testhover"> blah </div>

Un metodo per fare ciò è aggiungere:

pointer-events:none;

all'elemento su cui si desidera disabilitare il passaggio del mouse.

(nota: questo disabilita anche gli eventi javascript anche su quell'elemento, gli eventi click passeranno all'elemento dietro).

Supporto per il browser (97,04% al 22 agosto 2009)

Questo sembra essere molto più pulito

/**
* This allows you to disable hover events for any elements
*/
.disabled {
  pointer-events: none;  /**<-----------*/
  opacity: 0.2;
}

.button {
  border-radius: 30px;
  padding: 10px 15px;
  border: 2px solid #000;
  color: #FFF;
  background: #2D2D2D;
  text-shadow: 1px 1px 0px #000;
  cursor: pointer;
  display: inline-block;
  margin: 10px;
}

.button-red:hover {
  background: red;
}

.button-green:hover {
  background:green;  
}

<div class="button button-red">Im a red button hover over me</div>

<br/>

<div class="button button-green">Im a green button hover over me</div>

<br/>

<div class="button button-red disabled">Im a disabled red button</div>

<br/>

<div class="button button-green disabled">Im a disabled green button</div>

Utilizzare la :notpseudo-classe per escludere le classi alle quali non si desidera applicare l'hover:

VIOLINO

<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test nohover"> blah </div>

.test:not(.nohover):hover {  
    border: 1px solid red; 
}

Questo fa quello che vuoi in una regola CSS!

aggiungi una nuova classe .css:

#test.nohover:hover { border: 0 }

e

<div id="test" class="nohover">blah</div>

Vince la regola css più "specifica", quindi questo bordo: la versione 0 sovrascriverà quella generica specificata altrove.

Ho anche avuto questo problema, la mia soluzione era quella di avere un elemento sopra l'elemento su cui non voglio un effetto hover:

.no-hover {
  position: relative;
  opacity: 0.65 !important;
  display: inline-block;
}

.no-hover::before {
  content: '';
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<button class="btn btn-primary">hover</button>
<span class="no-hover">
  <button class="btn btn-primary ">no hover</button>
</span>

Vuoi mantenere il selettore, quindi aggiungerlo / rimuoverlo non funzionerà. Invece di scrivere un selettore CSS (o due) rigido e veloce, forse puoi semplicemente usare il selettore originale per applicare la nuova regola CSS a quell'elemento in base a un criterio:

$(".test").hover(
  if(some evaluation) {
    $(this).css('border':0);
  }
);