': Hover' CSS davranışını öğeden kaldır

Bir öğenin üzerine geldiğinizde biçimlendirmeyi değiştiren CSS var.

HTML:

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

CSS:

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

Bazı durumlarda fareyle üzerine gelindiğinde CSS uygulamak istemiyorum. Bunun bir yolu, jQuery kullanarak CSS sınıfını div'den kaldırmak olacaktır, ancak alt öğelerini biçimlendirmek için bu sınıfı da kullandığım için diğer şeyleri kıracaktır.

Bu da beni şu soruya yöneltti: 'Hover' css stilini bir öğeden kaldırmanın bir yolu var mı?

İki sınıf kullanırdım. Test sınıfınızı koruyun ve yalnızca fareyle üzerine gelmek istediğiniz kişilere eklediğiniz testhover adında ikinci bir sınıf ekleyin. Bu doğrudan sorduğunuz şey değil, ancak daha fazla bağlam olmadan en iyi çözüm gibi geliyor ve muhtemelen bunu yapmanın en temiz ve en basit yoludur.

Misal:

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

Bunu yapmanın bir yolu eklemektir:

pointer-events:none;

imleci devre dışı bırakmak istediğiniz öğeye getirin.

(not: bu, o öğedeki javascript etkinliklerini de devre dışı bırakır, tıklama etkinlikleri aslında arkadaki öğeye geçer).

Tarayıcı Desteği (Ağu 22.2019 itibariyle% 97.04)

Bu çok daha temiz görünüyor

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

:notFareyle üzerine gelme işleminin uygulanmasını istemediğiniz sınıfları hariç tutmak için sözde sınıfı kullanın:

VAKTİNİ BOŞA HARCAMAK

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

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

Bu bir css kuralında istediğinizi yapar!

yeni bir .css sınıfı ekleyin:

#test.nohover:hover { border: 0 }

ve

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

Daha "spesifik" css kuralı kazanır, bu nedenle bu border: 0 sürümü başka bir yerde belirtilen genel olanı geçersiz kılar.

Ben de bu sorunu vardı, benim çözüm üzerinde bir hover etkisi istemiyorum öğenin üzerinde bir öğe olmasıydı:

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

Seçiciyi saklamak istiyorsunuz, bu nedenle eklemek / kaldırmak işe yaramaz. Sert ve hızlı bir CSS seçicileri (veya iki) yazmak yerine, belki de sadece bazı kriterlere dayanarak o öğeye yeni CSS kuralı uygulamak için orijinal seçiciyi kullanabilirsiniz:

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