CSS peut-il gérer seul les effets de survol sur plusieurs éléments simultanément ?

Effets de survol pour plusieurs éléments avec CSS

Face au défi d'appliquer des effets de survol à plusieurs éléments simultanément, la sagesse conventionnelle pourrait suggérer JavaScript comme solution. Étonnamment, CSS seul peut résoudre efficacement ce problème.

Considérons une structure HTML dans laquelle deux éléments, une image et un calque, ont chacun des bordures de couleurs différentes pour leurs états normal et de survol. Pour créer le comportement souhaité où le survol de l'un des éléments active la couleur de la bordure de survol pour les deux, suivez ces étapes :

1. Définissez les styles de base :

   • Utilisez CSS pour définir les couleurs d'arrière-plan du .section et du .layer éléments.

2. Appliquer des effets de survol à l'élément .section :

   • Lorsque le curseur survole .section, mettez à jour le style de bordure de l'image à l'intérieur it.

3. Appliquer des effets de survol à l'élément .layer :

   • De même, lorsque vous survolez .layer, modifiez le style de bordure du calque élément.

Voici un exemple de code :

/* Define base styles */
.section {
  background: #ccc;
}
.layer {
  background: #ddd;
}

/* Hover effects on .section */
.section:hover img {
  border: 2px solid #333;
}

/* Hover effects on .layer */
.section:hover .layer {
  border: 2px solid #F90;
}

Ce CSS garantit que le survol de l'image ou du calque active la couleur de la bordure de survol pour les deux éléments. Et c'est tout ce qu'il faut, aucun JavaScript requis !

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!