web-dev-qa-db-fra.com

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

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

:not(:hover)

Ou est-ce le seul moyen de spécifier un élément non 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.

csscss3css-selectorspseudo-class
56
RockPaperLizard

Oui, utilisez :not(:hover)

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

démonstration de jsBin

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

Si mon hypothèse est correcte et si tous vos sélecteurs sont dans le 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;       // Yey, not hovered!
}
.child:hover{
   opacity: 1;         // ME! ME! ME!
}
77
Roko C. Buljan

Il n'y a pas une telle pseudo-classe. Il n’est pas nécessaire que vous utilisiez :not(:hover). L’intérêt de la pseudo-classe :not() est d’autoriser les auteurs à écrire des négations sans avoir à spécifier de négations séparées pour chaque pseudo-classe dynamique existante (et future) où un élément ne peut que concorder ou ne pas correspondre au pseudo-classe.

Par exemple, seuls certains éléments peuvent être :enabled Ou :disabled - la plupart des éléments ne sont ni car la sémantique ne fait simplement pas ne s'applique pas - mais un élément ne peut être désigné que par le périphérique de pointage (:hover) ou non (:not(:hover)). Fournir des négociations qui peuvent déjà être réalisées directement à l’aide de :not() nuirait grandement à son utilité (bien qu’il puisse toujours être utilisé pour annuler tout autre sélecteur simple - ou sélecteurs complexes entiers route).

L'argument selon lequel une telle pseudo-classe serait beaucoup moins coûteuse en calcul est assez faible. L'implémentation la plus naïve d'une telle pseudo-classe serait une vérification littérale :not(:hover), qui ne serait pas meilleure. Toute implémentation plus complexe ou optimisée et vous demandez aux fournisseurs d'implémenter une pseudo-classe aussi rapide que voire plus rapide que :not(:hover), ce qui est déjà assez peu courant, compte tenu des autres options que vous pouvez utiliser. ayez comme cascading et :not(:hover) (à chaque fois que la cascade n'est pas une option) à laquelle vous avez facilement accès. Cela ne justifie 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 moins 80% des scénarios). Et il y a aussi la question de nommer une telle pseudo-classe - vous n'avez pas proposé de nom pour cela, et je ne peux pas en penser un bon non plus. :not-hover Est seulement plus court de deux octets et à peine moins de travail à taper. Si quelque chose, c'est potentiellement plus déroutant que :not(:hover).

Si vous êtes préoccupé par la spécificité, notez que la pseudo-classe :not() elle-même n'est pas prise en compte pour la spécificité; seul son argument le plus spécifique est . :not(:hover) et :hover sont également spécifiques. Donc, la spécificité n'est pas un problème non plus.

Si vous êtes inquiet au sujet de la prise en charge du navigateur, une telle pseudo-classe, si elle était introduite, aurait probablement été introduite parallèlement à :not(), ou à un niveau ultérieur de Selectors, car elle n'apparaissait pas dans CSS2 (où :hover A été introduit pour la première fois il y a plus de 17 ans et a été implémenté dans IE4 une année encore auparavant. Il serait inutile de l'introduire dans un niveau ultérieur, 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 de :focus Plutôt que de :hover, Mais le même principe s'applique): Fait Les CSS ont un sélecteur: flou (pseudo-classe)?

2
BoltClock
a {
  /*styles*/
}

est un lien normal (non survolé)

a:hover {
  /*styles*/
}

est un lien survolé

0
nikola_wd