LabEx
LoginBeitreten

Sibling Fade CSS Effekt

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir lernen, wie wir einen CSS-Effekt namens "Sibling Fade" implementieren. Dieser Effekt ermöglicht es, dass die Geschwister eines über dem Mauszeiger liegenden Elements ausblenden, während das über dem Mauszeiger liegende Element vollständig sichtbar bleibt. Wir werden CSS-Selektoren und Transitions verwenden, um diesen Effekt auf einfache und elegante Weise zu erreichen. Am Ende dieses Labs werden Sie ein besseres Verständnis dafür haben, wie Sie CSS verwenden, um dynamisches und interaktives Webcontent zu erstellen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Sibling Fade

index.html und style.css wurden bereits in der VM bereitgestellt.

Um die Geschwister eines über dem Mauszeiger liegenden Elements auszublenden:

  1. Animieren Sie Änderungen an der opacity mithilfe der transition-Eigenschaft.
span {
  padding: 0 16px;
  transition: opacity 0.3s;
}
  1. Ändern Sie die opacity aller Elemente außer demjenigen, über dem die Maus sich befindet, auf 0.5 mithilfe der :hover- und :not-Pseudo-Klassen-Selektoren.
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}

Hier ist ein Beispiel für HTML-Code:

<div class="sibling-fade">
  <span>Item 1</span> <span>Item 2</span> <span>Item 3</span>
  <span>Item 4</span> <span>Item 5</span> <span>Item 6</span>
</div>

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Sibling Fade-Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.