Comment éviter les effets de survol du parent lors du survol d'un élément enfant dans des DIV imbriqués ?

DIV imbriqués : désactivation des effets de survol sur les parents lorsque l'enfant est survolé

Dans ce scénario, vous avez deux éléments DIV imbriqués, étiquetés comme " .parent" et ".enfant". Lorsque vous survolez ".parent", vous souhaitez que sa couleur d'arrière-plan change. Cependant, lorsque vous survolez « .child », vous souhaitez que « .parent » revienne à son arrière-plan gris par défaut.

Code CSS pour les effets de survol des parents et des enfants :

<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;
}</code>

Problème :

Le code CSS ci-dessus applique avec succès les effets de survol souhaités à ".parent" et ".child". Cependant, il ne répond pas à l'obligation de désactiver l'effet de survol sur ".parent" lorsque ".child" est survolé.

Solution utilisant un élément frère :

Il s'avère que CSS ne fournit pas de moyen direct d'obtenir cet effet avec des éléments imbriqués. Cependant, vous pouvez utiliser une solution de contournement intelligente en utilisant un élément frère.

1. Ajoutez un nouveau frère DIV avec la classe ".sibling" à l'intérieur du conteneur ".parent".
2. Positionnez le " .sibling" pour couvrir l'élément ".child" à l'aide des propriétés CSS 'top' et 'left'.
3. Définissez une valeur 'z-index' plus élevée pour ".sibling" pour vous assurer qu'il apparaît au-dessus de ". enfant."
4. Ajoutez le même effet de transition de couleur d'arrière-plan à ".sibling" que celui que vous avez appliqué à ".parent."

CSS mis à jour avec l'élément Sibling :

<code class="css">.parent {
  ... (unchanged)
}

.child {
  ... (unchanged)
}

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

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

Comment ça marche :

Lorsque le curseur de la souris survole « .child », la couleur d'arrière-plan de « .child » change. Simultanément, la couleur d'arrière-plan de ".sibling" change également en raison de l'effet de survol qui lui est appliqué. Étant donné que « .sibling » recouvre « .child », le changement de couleur d'arrière-plan remplace effectivement l'effet de survol appliqué à « .parent ». Cela donne l'illusion que l'effet de survol sur ".parent" a été désactivé.

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!