Comment suspendre les effets de survol du parent lors du survol d'un élément enfant ?

La solution CSS

Atteindre ce comportement sans JavaScript nécessite une solution de contournement intelligente en utilisant un élément frère.

<code class="css">.parent {
  width: 100px;
  height: 100px;
  padding: 50px;
  background: lightgray;
}

.parent:hover {
  background: lightblue;
}

.child {
  height: 100px;
  width: 100px;
  background: darkgray;
}

.child:hover {
  background: lightblue;
}

.sibling {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 50px;
  top: -50px;
  left: -50px;
  background: #3D6AA2;
  transition: background-color 1s;
}

.sibling:hover {
  background: #FFF;
}</code>

<code class="html"><div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div></code>

L'élément frère Astuce

L'élément frère est positionné de manière absolue dans l'élément parent et chevauche les éléments parent et enfant. Il s'étend au-delà des limites du parent pour capturer efficacement tous les événements de survol ne ciblant pas spécifiquement l'élément enfant.

Lorsque l'élément frère est survolé, sa couleur d'arrière-plan devient blanche, annulant ainsi visuellement l'effet de survol du parent. Lorsque l'élément enfant est survolé, son propre effet de survol demeure, mais l'élément frère blanc masque l'effet de survol du parent.

Développements récents

Notez que le :has( ) existe désormais, permettant un ciblage direct des éléments parents en fonction de la présence de descendants spécifiques. Cette approche peut être utilisée pour obtenir le comportement souhaité avec plus d'élégance.

<code class="css">.parent:has(.child:hover) {
  background: lightgray !important;
}</code>

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!