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

Question

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

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

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

Dans certains cas, je ne veux pas appliquer de CSS au survol. Une solution consisterait à supprimer la classe CSS de la div à l'aide de jQuery, mais cela nuirait à d'autres choses, car j'utilise également cette classe pour formater ses éléments enfants.

Existe-t-il un moyen de supprimer le style css "hover" d'un élément ?

Answer 1

Une méthode pour y parvenir consiste à ajouter :

pointer-events: none;

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

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

Support des navigateurs ( 98,12 % au 1er janvier 2021 )

Cela semble 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">I'm a red button hover over me</div>

<br />

<div class="button button-green">I'm a green button hover over me</div>

<br />

<div class="button button-red disabled">I'm a disabled red button</div>

<br />

<div class="button button-green disabled">I'm a disabled green button</div>

Answer 2

Utiliser le :not pour exclure les classes auxquelles vous ne voulez pas que le survol s'applique :

FIDDLE

<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 en une seule règle css !

Answer 3

J'utiliserais deux classes. Gardez votre classe de test et ajoutez une seconde classe appelée testhover que vous n'ajoutez qu'à ceux que vous voulez voir 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 c'est probablement la façon la plus propre et la plus simple de procéder.

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>

Answer 4

Ajouter 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, de sorte que la version border:0 l'emporte sur la règle générique spécifiée ailleurs.

Answer 5

J'ai aussi eu ce problème, ma solution a été 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>