Existe-t-il une pseudo-classe CSS opposée à: hover?

Y a-t-il une pseudo-classe en CSS à spécifier

:not(:hover)

Ou est-ce la seule façon de spécifier un élément qui n'est pas survolé?

J'ai parcouru plusieurs références CSS3, et je ne vois aucune mention d'une pseudo-classe CSS pour spécifier le contraire de: hover.

Oui, utilisez :not(:hover)

.child:not(:hover){
  opacity: 0.3;
}

Démo jsBin

Un autre exemple; Je pense que vous voulez: "quand on est survolé, obscurcir tous les autres éléments" .

Si mon hypothèse est correcte et que tous vos sélecteurs sont à l'intérieur du même parent:

.parent:hover .child{
    opacity: 0.2;      // Dim all other elements
}
.child:hover{
   opacity: 1;         // Not the hovered one
}

.child{
  display:inline-block;
  background:#000;
  border:1px solid #fff;
  width: 50px;
  height: 50px;
  transition: 0.4s;
}

.parent:hover .child{
  opacity: 0.3;
}
.parent .child:hover{
  opacity: 1;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Sinon ... utilisez simplement la logique par défaut:

.child{
   opacity: 0.2;
}
.child:hover{
   opacity: 1;
}

Il n'y a pas une telle pseudo-classe. Il n'y en a pas besoin, quand vous pouvez simplement utiliser :not(:hover). L'intérêt de la :not()pseudo-classe est de permettre aux auteurs d'écrire des négations sans avoir à spécifier des négations séparées de chaque pseudo-classe dynamique existante (et future) où un élément ne peut correspondre qu'à la pseudo-classe ou non.

Par exemple, seuls certains éléments peuvent être :enabledou :disabled- la plupart des éléments ne sont ni l'un ni l'autre car la sémantique ne s'applique tout simplement pas - mais un élément ne peut être désigné que par le dispositif de pointage ( :hover), ou non ( :not(:hover)). Fournir des négations qui peuvent déjà être obtenues directement en utilisant :not()compromettrait considérablement son utilité (bien qu'il puisse toujours être utilisé pour annuler tout autre sélecteur simple - ou des sélecteurs complexes entiers sur la route).

L'argument selon lequel une telle pseudo-classe serait moins coûteuse en calcul est assez faible. L'implémentation la plus naïve d'une telle pseudo-classe serait une :not(:hover)vérification littérale , ce qui ne serait pas mieux. Des implémentations plus complexes ou optimisées et vous demandez aux fournisseurs d'implémenter une pseudo-classe qui est soit aussi rapide, soit même plus rapide que :not(:hover), quelque chose qui est déjà assez rare d'un cas d'utilisation compte tenu des autres options que vous avez telles que la cascade et :not(:hover)(pour chaque fois que la cascade n'est pas une option) auquel vous avez facilement accès. Cela ne justifie tout simplement pas le temps et les efforts nécessaires pour spécifier, implémenter et tester une alternative à au moins une autre méthode existante qui est fonctionnellement équivalente à 100% (et qui s'applique à au moins80% des scénarios). Et il y a aussi le problème de nommer une telle pseudo-classe - vous n'avez pas proposé de nom pour cela, et je ne peux pas penser à un bon non plus. :not-hoverest seulement plus court de deux octets et peu de travail à taper. Si quoi que ce soit, c'est potentiellement plus déroutant que :not(:hover).

Si vous êtes préoccupé par la spécificité, notez que la :not()pseudo-classe elle-même n'est pas comptée pour la spécificité; seul son argument le plus spécifique est . :not(:hover)et :hoversont tout aussi spécifiques. La spécificité n'est donc pas non plus un problème.

Si vous vous inquiétez de la prise en charge du navigateur, une telle pseudo-classe, si elle avait été introduite, aurait probablement été introduite parallèlement :not()ou à un niveau ultérieur de sélecteurs, car elle n'apparaissait pas dans CSS2 (où elle a :hoverété introduite pour la première fois plus de 17 ans) il y a, et mis en œuvre pour la première fois dans IE4 un an auparavant). L'introduire à un niveau ultérieur serait inutile car les auteurs seraient simplement obligés de continuer à utiliser :not(:hover)jusqu'à ce que les navigateurs commencent à implémenter cette nouvelle pseudo-classe de toute façon, et ils n'auraient aucune raison de changer.

Notez que ce n'est pas la même chose que la question suivante, qui parle d'événements vs états (il s'agit à l'origine :focusplutôt que de :hover, mais le même principe s'applique): Le CSS a-t-il un sélecteur: blur (pseudo-classe)?

Si vous souhaitez afficher quelque chose uniquement en survolant autre chose, vous pouvez utiliser

selector:not(:hover)

comme ça:

section{
   font-size:3em;
}

div:not(:hover) + section{
 display:none;
}

<div>Hover on me</div>

<section>Peek A Boo!</section>

Il y a plusieurs effets et résultats inhabituels lors de l'utilisation :not()que vous devez garder à l'esprit:

• :not(:not(...)), :not(p::before)n'est pas possible
• :not(*) ne serait évidemment jamais appliqué
• :not(.foo)correspondra à tout ce qui ne l'est pas .foo, y compris les balises telles que <HTML>et<body>
• augmente la spécificité d'une règle, par exemple: #foo:not(#bar)correspondra au même élément que le plus simple #foo, mais a une spécificité plus élevée.

andfonctionnement avec :not:

• Éléments qui ne sont pas <div>et non des <span>éléments: body :not(div):not(span){}

oropération avec :not, ce n'est pas encore bien pris en charge.

• Éléments qui ne sont pas .crazyou .fancy:body :not(.crazy, .fancy){}

MDN source

a {
  /*styles*/
} 

est un lien normal (non survolé)

a:hover {
  /*styles*/
} 

est un lien survolé