Supprimer le comportement CSS ': hover' de l'élément

J'ai du CSS qui change la mise en forme lorsque vous survolez un élément.

HTML:

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

CSS:

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

Dans certains cas, je ne veux pas appliquer CSS en survol. Une façon serait de simplement supprimer la classe CSS du div en utilisant jQuery, mais cela casserait d'autres choses puisque j'utilise également cette classe pour formater ses éléments enfants.

Cela m'a amené à me poser la question: existe-t-il un moyen de supprimer le style css «hover» d'un élément?

J'utiliserais deux classes. Conservez votre classe de test et ajoutez une deuxième classe appelée testhover que vous n'ajoutez qu'à celles que vous souhaitez survoler - à côté de la classe de test. Ce n'est pas directement ce que vous avez demandé, mais sans plus de contexte, cela semble être la meilleure solution et peut-être la façon la plus propre et la plus simple de le faire.

Exemple:

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

Une méthode pour ce faire est d'ajouter:

pointer-events:none;

à l'élément sur lequel vous souhaitez désactiver le survol.

(Remarque: cela désactive également les événements javascript sur cet élément, les événements de clic tomberont en fait à l'élément derrière).

Prise en charge du navigateur (97,04% au 22 août 2019)

Cela semble être beaucoup plus propre

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

Utilisez la :notpseudo-classe pour exclure les classes auxquelles vous ne souhaitez pas appliquer le survol:

VIOLON

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

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

Cela fait ce que vous voulez dans une règle css!

ajoutez une nouvelle classe .css:

#test.nohover:hover { border: 0 }

et

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

La règle css la plus "spécifique" l'emporte, donc cette version border: 0 remplacera la version générique spécifiée ailleurs.

J'ai aussi eu ce problème, ma solution était d'avoir un élément au-dessus de l'élément sur lequel je ne veux pas d'effet de survol:

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

Vous voulez garder le sélecteur, donc l'ajouter / le supprimer ne fonctionnera pas. Au lieu d'écrire un sélecteur CSS dur et rapide (ou deux), vous pouvez peut-être simplement utiliser le sélecteur d'origine pour appliquer une nouvelle règle CSS à cet élément en fonction d'un critère:

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