Entfernen Sie das CSS-Verhalten ': hover' aus dem Element

Ich habe CSS, das die Formatierung ändert, wenn Sie mit der Maus über ein Element fahren.

HTML:

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

CSS:

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

In einigen Fällen möchte ich beim Schweben kein CSS anwenden. Eine Möglichkeit wäre, einfach die CSS-Klasse mit jQuery aus dem div zu entfernen, aber das würde andere Dinge kaputt machen, da ich diese Klasse auch zum Formatieren ihrer untergeordneten Elemente verwende.

Das führte mich zu der Frage: Gibt es eine Möglichkeit, das 'Hover'-CSS-Styling aus einem Element zu entfernen?

Ich würde zwei Klassen verwenden. Behalten Sie Ihre Testklasse bei und fügen Sie eine zweite Klasse namens testhover hinzu, die Sie nur zu denen hinzufügen, die Sie schweben möchten - neben der Testklasse. Dies ist nicht direkt das, was Sie gefragt haben, aber ohne mehr Kontext fühlt es sich wie die beste Lösung an und ist möglicherweise die sauberste und einfachste Art, dies zu tun.

Beispiel:

.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>

Eine Methode, um dies zu tun, besteht darin, Folgendes hinzuzufügen:

pointer-events:none;

zu dem Element, auf dem Sie den Hover deaktivieren möchten.

(Hinweis: Dadurch werden auch Javascript-Ereignisse für dieses Element deaktiviert. Klickereignisse fallen tatsächlich auf das dahinterliegende Element.)

Browser-Unterstützung (97,04% per 22. August 2009)

Dies scheint viel sauberer zu sein

/**
* 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>

Verwenden Sie die :notPseudoklasse, um die Klassen auszuschließen, auf die der Hover nicht angewendet werden soll:

GEIGE

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

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

Dies macht, was Sie wollen, in einer CSS-Regel!

Fügen Sie eine neue CSS-Klasse hinzu:

#test.nohover:hover { border: 0 }

und

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

Die "spezifischere" CSS-Regel gewinnt, sodass diese Version mit Rand: 0 die an anderer Stelle angegebene generische Version überschreibt.

Ich hatte auch dieses Problem. Meine Lösung bestand darin, ein Element über dem Element zu haben, auf das ich keinen Hover-Effekt haben möchte:

.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>

Sie möchten den Selektor behalten, damit das Hinzufügen / Entfernen nicht funktioniert. Anstatt einen festen und schnellen CSS-Selektor (oder zwei) zu schreiben, können Sie möglicherweise einfach den ursprünglichen Selektor verwenden, um eine neue CSS-Regel auf dieses Element anzuwenden, basierend auf einem Kriterium:

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