Видалити ': навести курсор' поведінку CSS від елемента

У мене є CSS, який змінює форматування, коли ви наводите курсор на елемент.

HTML:

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

CSS:

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

У деяких випадках я не хочу застосовувати CSS на наведення курсора. Одним із способів було б просто видалити CSS-клас з div за допомогою jQuery, але це порушить інші речі, оскільки я також використовую цей клас для форматування його дочірніх елементів.

Отже, це змусило мене поставити питання: Чи є спосіб видалити стилі CSS з елемента?

Я б використав два класи. Зберігайте свій тестовий клас та додайте другий клас під назвою testhover, який ви додаєте лише до тих, кого хочете навести - поряд із тестовим класом. Це не те, про що ви запитували, але без більшого контексту це вважається найкращим рішенням і, можливо, це найчистіший і найпростіший спосіб зробити це.

Приклад:

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

Один із способів зробити це - додати:

pointer-events:none;

до елемента, на якому потрібно відключити наведення курсора.

(зауважте: це також відключає події javascript на цьому елементі, події клацання фактично потрапляють на елемент позаду).

Підтримка браузера (97,04% станом на 22 серпня 2011 р.)

Це здається набагато чистішим

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

Використовуйте :notпсевдоклас, щоб виключити класи, до яких не потрібно застосувати курсор:

ПІДМОГА

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

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

Це робить те, що ви хочете, в одному правилі css!

додати новий клас .css:

#test.nohover:hover { border: 0 }

і

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

Більш "специфічне" правило css виграє, тому ця межа: 0 версія буде перевершувати загальне, вказане в іншому місці.

У мене також була ця проблема, моє рішення полягало в тому, щоб мати елемент над елементом, я не хочу впливати на:

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

Ви хочете зберегти селектор, тому додавання / видалення його не вийде. Замість того, щоб писати жорсткі та швидкі селектори CSS (або два), можливо, ви можете просто скористатися оригінальним селектором, щоб застосувати до цього елемента нове правило CSS на основі якогось критерію

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