Css : sélectionnez tous les frères et sœurs en utilisant not()

Notre équipe UX voulait que je crée un menu de navigation qui atténue le reste des éléments au lieu de mettre en surbrillance l'élément survolé.

CSS à la rescousse !

La solution est assez simple en utilisant la pseudo-classe CSS not() :

Le HTML

<div class="menu-items">
  <div>Home</div>
  <div>About</div>
  <div>Contact</div>
  <div>Services</div>
  <div>Blog</div>
  <div>Portfolio</div>
</div>

Le SCSS

J'ai supprimé les propriétés de style afin que nous puissions nous concentrer sur la fonctionnalité réelle :

1 .menu-items {    
2     visibility: hidden;
3 
4     & > * {
5         visibility: visible;
6         transition: opacity 500ms;
7     }
8 
9     &:hover > :not(:hover) {
10        opacity: 0.45;
11    }
12 }

Nous avons un conteneur avec une classe .menu-items.
À la ligne n°4, nous sélectionnons tous ses éléments enfants et leur ajoutons une transition d'animation d'opacité.

La ligne n°9 gère l'effet de survol sur les éléments en définissant l'opacité de tous les éléments non survolés en utilisant la pseudo-classe not() à une valeur inférieure.

Et que se passe-t-il avec la propriété de visibilité ?
Nous définissons la visibilité du conteneur .menu-items sur caché, puis redéfinissons les éléments enfants sur visibles. Cela provoque la désactivation de l'effet lorsque nous survolons entre les éléments.

C'est tout :)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!