Hapus ': hover' perilaku CSS dari elemen

Saya memiliki CSS yang mengubah pemformatan saat Anda mengarahkan kursor ke suatu elemen.

HTML:

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

CSS:

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

Dalam beberapa kasus saya tidak ingin menerapkan CSS di hover. Salah satu caranya adalah dengan hanya menghapus kelas CSS dari div menggunakan jQuery tapi itu akan merusak hal-hal lain karena saya juga menggunakan kelas itu untuk memformat elemen turunannya.

Jadi itu membuat saya bertanya: Apakah ada cara untuk menghapus styling 'hover' css dari suatu elemen?

Saya akan menggunakan dua kelas. Pertahankan kelas tes Anda dan tambahkan kelas kedua yang disebut testhover yang hanya Anda tambahkan ke yang ingin Anda arahkan - di samping kelas tes. Ini bukan secara langsung apa yang Anda tanyakan tetapi tanpa konteks yang lebih terasa rasanya solusi terbaik dan mungkin cara paling bersih dan paling sederhana untuk melakukannya.

Contoh:

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

Salah satu metode untuk melakukan ini adalah menambahkan:

pointer-events:none;

ke elemen Anda ingin menonaktifkan melayang.

(catatan: ini juga menonaktifkan acara javascript pada elemen itu juga, acara klik sebenarnya akan jatuh ke elemen di belakang).

Dukungan Browser (97,04% pada 22 Agustus.2019)

Ini tampaknya jauh lebih bersih

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

Gunakan :notpseudo-class untuk mengecualikan kelas yang tidak Anda inginkan melayang ke:

BIOLA

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

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

Ini melakukan apa yang Anda inginkan dalam satu aturan css!

tambahkan kelas .css baru:

#test.nohover:hover { border: 0 }

dan

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

Aturan css yang lebih "spesifik" menang, sehingga batas ini: versi 0 akan menimpa yang umum yang ditentukan di tempat lain.

Saya juga punya masalah ini, solusi saya adalah memiliki elemen di atas elemen yang saya tidak ingin efek hover pada:

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

Anda ingin mempertahankan pemilih, jadi menambahkan / menghapusnya tidak akan berhasil. Alih-alih menulis pemilih CSS yang keras dan cepat (atau dua), mungkin Anda bisa menggunakan pemilih asli untuk menerapkan aturan CSS baru ke elemen tersebut berdasarkan beberapa kriteria:

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