Ein purer CSS -Galerie -Fokus -Effekt mit: nicht: nicht

Styling alle Elemente innerhalb eines Containers, mit Ausnahme des erweiterten, häufig mit JavaScript beteiligt. Dies bedeutete typischerweise das Hinzufügen oder Entfernen von Klassen zu mouseenter und mouseleave Ereignissen. Obwohl funktional, ist eine reine CSS -Lösung häufig vorzuziehen. Dieser Artikel beschreibt einen CSS-Ansatz, der zunächst von Techniken inspiriert ist, die bei der Nachbildung von Animationen wie der Netflix-Homepage verwendet werden. Ein früherer Versuch, diese Methode unter Verwendung dieser Methode aufgrund von Lücken zwischen den Elementen zu fälschten. Dieser Artikel enthält eine Lösung, die diese Lücken elegant behandelt.

Markup- und Basis -CSS

Die grundlegende HTML verwendet eine gitterbasierte Liste:

• .grid: Das Containergitter.
• .grid__child: individuelle Netzelemente.

Das Markup lautet wie folgt:

Das anfängliche CSS stilft das Netz und seine Kinder:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 1rem;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
}

Dies erstellt ein dreispaltiges Netz (dynamisch anhand der Bildschirmgröße anpassen) mit einer Lücke zwischen den Elementen.

Nutzung von CSS -Selektoren

Die Kerninteraktion umfasst zwei Schritte:

1. Der Behälter betrifft alle Kinder.
2. Das erweiterte Kind selbst ist ausgeschlossen.

Zunächst zielen wir auf alle Kinder ab, wenn der Behälter schwebt:

.grid:hover .grid__child {
  /* ... */
}

Als nächstes schließen wir das derzeit schwebende Kind mit :not(:hover) aus, um die Opazität zu verringern:

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

Dies funktioniert perfekt ohne Lücken zwischen den Elementen. Mit Lücken löst der Effekt jedoch auch dann aus, wenn der Cursor über die Lücke selbst liegt.

adressieren Lücken

Die Lösung liegt in der Steuerung von Zeigerereignissen. Indem wir pointer-events: none auf den .grid -Container und pointer-events: auto auf seine Kinder einstellen, stellen wir sicher, dass der Schwebeffekt nur dann direkt über ein untergeordnetes Element auslöst und die Lücken effektiv ignoriert.

.grid {
  /* ... */
  pointer-events: none;
}

.grid__child {
  /* ... */
  pointer-events: auto;
}

Hinzufügen eines Übergangs für reibungslosere Opazitätsänderungen vervollständigt den Effekt.

Die endgültigen CSS mit dieser Lösung lautet:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 3rem;
  pointer-events: none;
}

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
  pointer-events: auto;
  transition: opacity 300ms;
}

potenzielle Einschränkungen

Obwohl wir effektiv sind, erfordert dieser Ansatz möglicherweise Anpassungen für scrollbare Behälter (z. B. horizontale Schieberegler). In solchen Fällen kann das Wickeln des .grid in einen anderen Behälter eine Problemumgehung sein.

Schlussfolgerung

Dies zeigt eine leistungsstarke reine CSS -Lösung für eine gemeinsame Interaktionsproblematik. Durch die Nutzung fortschrittlicher CSS -Selektoren und Zeiger -Ereignissteuerung erzielen wir einen ausgefeilten Effekt, ohne auf JavaScript zurückzugreifen, was zu einem saubereren, wartbaren Code führt. Dies unterstreicht die zunehmenden Fähigkeiten von CSS und fördert die Erforschung nativer Lösungen, bevor die Komplexität der JavaScript -Komplexität hinzugefügt wird.

Das obige ist der detaillierte Inhalt vonEin purer CSS -Galerie -Fokus -Effekt mit: nicht: nicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!