LabEx
EntrarÚnete

Efecto CSS Sibling Fade

Beginner

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

Introducción

En este laboratorio, aprenderemos cómo implementar un efecto CSS llamado "Sibling Fade". Este efecto permite que los hermanos de un elemento sobre el que se pasa el cursor se desvanezcan, mientras que el elemento sobre el que se pasa el cursor permanece completamente visible. Utilizaremos selectores CSS y transiciones para lograr este efecto de manera simple y elegante. Al final de este laboratorio, tendrás una mejor comprensión de cómo utilizar CSS para crear contenido web dinámico e interactivo.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Sibling Fade

index.html y style.css ya se han proporcionado en la VM.

Para desvanecer a los hermanos de un elemento sobre el que se pasa el cursor:

  1. Anima los cambios de opacidad utilizando la propiedad transition.
span {
  padding: 0 16px;
  transition: opacity 0.3s;
}
  1. Cambia la opacidad de todos los elementos excepto el que el mouse está sobre a 0.5 utilizando los selectores pseudo-clase :hover y :not.
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}

Aquí hay un ejemplo de código 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>

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Sibling Fade. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.