LabEx
EntrerRejoindre

Effet CSS Sibling Fade

Beginner

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

Introduction

Dans ce laboratoire, nous allons apprendre à implémenter un effet CSS appelé "Sibling Fade". Cet effet permet aux frères et sœurs d'un élément survolé de s'estomper, tandis que l'élément survolé reste entièrement visible. Nous utiliserons les sélecteurs CSS et les transitions pour obtenir cet effet de manière simple et élégante. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière d'utiliser CSS pour créer un contenu web dynamique et interactif.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Sibling Fade

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour faire s'estomper les frères et sœurs d'un élément survolé :

  1. Animer les changements d'opacité en utilisant la propriété transition.
span {
  padding: 0 16px;
  transition: opacity 0.3s;
}
  1. Changer l'opacité de tous les éléments sauf celui survolé par la souris à 0,5 en utilisant les sélecteurs pseudo-classes :hover et :not.
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}

Voici un exemple de code HTML :

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

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Summary

Félicitations! Vous avez terminé le laboratoire Sibling Fade. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.