Un effet de mise au point de la galerie CSS pure avec: pas

Auparavant, styliser tous les éléments dans un conteneur, sauf celui qui planait, impliquait souvent JavaScript. Cela signifiait généralement ajouter ou supprimer des classes sur les événements mouseenter et mouseleave. Bien que fonctionnel, une solution CSS pure est souvent préférable. Cet article détaille une approche uniquement du CSS, initialement inspirée par les techniques utilisées pour recréer des animations comme la page d'accueil de Netflix. Cependant, une tentative précédente utilisant cette méthode a échoué sur une disposition basée sur la grille en raison des lacunes entre les éléments. Cet article présente une solution qui gère élégamment ces lacunes.

Marquage et CSS de base

Le HTML fondamental utilise une liste basée sur la grille:

• .grid: la grille de conteneur.
• .grid__child: éléments de grille individuels.

Le balisage est le suivant:

Le CSS initial styles la grille et ses enfants:

.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;
}

Cela crée une grille à trois colonnes (ajustant dynamiquement en fonction de la taille de l'écran) avec un écart entre les éléments.

Tire en tirant des sélecteurs CSS

L'interaction centrale implique deux étapes:

1. Le plan de planage du conteneur affecte tous les enfants.
2. L'enfant plané lui-même est exclu.

Tout d'abord, nous ciblons tous les enfants lorsque le récipient est plané:

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

Ensuite, nous excluons l'enfant actuellement plané en utilisant :not(:hover) pour réduire l'opacité:

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

Cela fonctionne parfaitement sans lacunes entre les éléments. Cependant, avec les lacunes, l'effet se déclenche même lorsque le curseur est sur l'écart lui-même.

Additionner les lacunes

La solution réside dans le contrôle des événements du pointeur. En réglant pointer-events: none sur le conteneur .grid et pointer-events: auto sur ses enfants, nous nous assurons que l'effet de survol ne se déclenche directement sur un élément enfant, ignorant efficacement les lacunes.

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

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

L'ajout d'une transition pour les modifications d'opacité plus lisses termine l'effet.

Le CSS final incorporant cette solution est:

.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;
}

limitations potentielles

Bien que efficace, cette approche peut nécessiter des ajustements pour les conteneurs défiles (par exemple, les curseurs horizontaux). Dans de tels cas, envelopper le .grid dans un autre conteneur peut être une solution de contournement.

Conclusion

Cela démontre une puissante solution CSS pure pour un défi d'interaction commun. En tirant parti des sélecteurs CSS avancés et du contrôle des événements de pointeur, nous réalisons un effet sophistiqué sans recourir à JavaScript, conduisant à un code plus propre et plus maintenable. Cela met en évidence les capacités croissantes du CSS et encourage l'exploration de solutions natives avant d'ajouter la complexité JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!