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


87

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.


1
element:not(:hover)Utilisez plutôt element.
lmgonzalves

5
@lmgonzalves Cela ne fonctionnera pas; cela forcera le style à la fois dans les états survolés et non survolés.
RockPaperLz- Mask it or Casket

Pourquoi pas :not(:hover)?
Oriol le

@Oriol Seulement parce qu'elle n'est pas aussi propre qu'une pseudo-classe non-niée et parce qu'elle pourrait être plus coûteuse en calcul qu'une pseudo-classe conçue à cet effet.
RockPaperLz- Mask it or Casket

Réponses:


139

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
}

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

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

Votre première phrase (en supposant qu'elle est correcte!) Ressemble à la réponse. Merci! Je n'ai pas trouvé de pseudo-classe CSS appropriée, car elle ne doit pas (encore) exister. Les exemples que vous avez fournis ne s'appliquent pas à ce sur quoi je travaille, mais sont très utiles et utiles, quoi qu'il en soit. Je me demande combien coûterait ce premier exemple, car il correspond à presque tout. Des pensées?
RockPaperLz- Mask it or Casket

@RockPaperLizard eh bien, si vous utilisez 1000 éléments enfants, im pourrait devenir un peu lent jsbin.com/hazega/1/edit?html,css,output sinon, 100, 200 éléments devraient fonctionner très bien.
Roko C. Buljan

Merci. Fonctionne :not(:disabled)aussi et j'assume une tonne d'autres attributs similaires.
Aucun remboursement Aucun retour

3

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)?


1

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


0
a {
  /*styles*/
} 

est un lien normal (non survolé)

a:hover {
  /*styles*/
} 

est un lien survolé


2
Ce n'est pas exact. Le premier stylise l'élément, à la fois lorsqu'il est survolé et non survolé, à moins que le second ne soit également spécifié. Quoi qu'il en soit, le premier est appliqué dans les deux états, et le second le remplacera simplement dans l'un des deux états.
RockPaperLz- Mask it or Casket

Vous avez raison à ce sujet. Mais c'est ainsi que c'est fait et aussi la seule façon de le faire avec css. Que voulez-vous réellement accomplir?
nikola_wd

Merci. J'ai ajouté un commentaire qui répond à votre question dans la section des questions principales ci-dessus car un autre utilisateur SO a posé la même question que la vôtre.
RockPaperLz- Mask it or Casket
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.