CSS: Alle Geschwister mit not() auswählen

Unser UX-Team wollte, dass ich ein Navigationsmenü erstelle, das die restlichen Elemente abblendet, anstatt das schwebende Element hervorzuheben.

CSS zur Rettung!

Die Lösung ist ganz einfach, wenn man die CSS-Pseudoklasse not() verwendet:

Der HTML

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

Das SCSS

Ich habe die Styling-Eigenschaften entfernt, damit wir uns auf die eigentliche Funktionalität konzentrieren können:

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 }

Wir haben einen Container mit einer .menu-items-Klasse.
In Zeile 4 wählen wir alle untergeordneten Elemente aus und fügen ihnen einen Deckkraftanimationsübergang hinzu.

Zeile Nr. 9 behandelt den Hover-Effekt auf Elemente, indem sie die Deckkraft aller nicht schwebenden Elemente mithilfe der Pseudoklasse not() auf einen niedrigeren Wert setzt.

Und was ist mit der Sichtbarkeitseigenschaft los?
Wir setzen die Sichtbarkeit des .menu-items-Containers auf „verborgen“ und setzen dann die untergeordneten Elemente wieder auf „sichtbar“. Dadurch wird der Effekt ausgeschaltet, wenn wir zwischen den Elementen schweben.

Das ist es :)

Das obige ist der detaillierte Inhalt vonCSS: Alle Geschwister mit not() auswählen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!