Usuń zachowanie CSS „: hover” z elementu

Mam CSS, który zmienia formatowanie po najechaniu kursorem na element.

HTML:

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

CSS:

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

W niektórych przypadkach nie chcę stosować CSS po najechaniu kursorem. Jednym ze sposobów byłoby po prostu usunięcie klasy CSS z div za pomocą jQuery, ale to zepsułoby inne rzeczy, ponieważ używam tej klasy również do formatowania jej elementów potomnych.

To doprowadziło mnie do pytania: czy istnieje sposób na usunięcie stylów CSS typu „hover” z elementu?

Użyłbym dwóch klas. Zachowaj swoją klasę testową i dodaj drugą klasę o nazwie testhover, którą dodajesz tylko do tych, które chcesz najechać - obok klasy testowej. Nie jest to bezpośrednio to, o co prosiłeś, ale bez większego kontekstu wydaje się to najlepszym rozwiązaniem i prawdopodobnie najczystszym i najprostszym sposobem na zrobienie tego.

Przykład:

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

Jedną z metod jest dodanie:

pointer-events:none;

do elementu, dla którego chcesz wyłączyć kursor.

(uwaga: to również wyłącza zdarzenia javascript w tym elemencie, zdarzenia kliknięcia będą faktycznie przechodzić do elementu znajdującego się za nim).

Obsługa przeglądarek (97,04% od 22 sierpnia 2019 r.)

Wydaje się, że jest to znacznie czystsze

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

Użyj :notpseudoklasy, aby wykluczyć klasy, do których nie chcesz stosować dymka:

SKRZYPCE

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

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

Robi to, co chcesz w jednej regule CSS!

dodaj nową klasę .css:

#test.nohover:hover { border: 0 }

i

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

Bardziej „szczegółowa” reguła css wygrywa, więc ta wersja border: 0 zastąpi ogólną określoną w innym miejscu.

Miałem też ten problem, moim rozwiązaniem było posiadanie elementu nad elementem, na który nie chcę najeżdżać:

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

Chcesz zachować selektor, więc dodanie / usunięcie go nie zadziała. Zamiast pisać twarde i szybkie selektory CSS (lub dwa), być może możesz po prostu użyć oryginalnego selektora, aby zastosować nową regułę CSS do tego elementu w oparciu o pewne kryterium:

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