Comment désactiver l'effet de survol sur le parent lors du survol d'un enfant en CSS ?

L'effet de survol sur l'enfant désactive l'effet de survol sur le parent

Le problème :

Vous avez deux

éléments et vous souhaitez modifier l'arrière-plan de l'élément parent .parent lorsque vous le survolez. Cependant, lorsque vous survolez l'élément enfant .child, vous souhaitez que l'arrière-plan du parent revienne à son état d'origine.

La solution :

En utilisant du CSS pur, il était auparavant impossible de obtenir cet effet directement. Cependant, avec l'introduction récente du sélecteur :has en 2024, il est désormais possible de résoudre ce problème :

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

/* The solution using the :has selector */
.parent:has(.child:hover) {
  background: lightgray;
}</code>

En ciblant l'élément parent qui a un élément enfant survolé, nous pouvons effectivement désactiver le survol effet sur le parent lorsque l'enfant est survolé.

Solution limitée précédente (avant 2024) :

Avant l'introduction du sélecteur :has, une solution de contournement consistait à utiliser un élément frère pour obtenir un effet similaire :

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

.child {
  height: 100px;
  width: 100px;
  background: #355E95;
  transition: background-color 1s;
  position: relative;
  top: -200px;
}

.child:hover {
  background: #000;
}

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

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

Cette approche impliquait la création d'un élément frère positionné au-dessus de l'élément enfant. Lorsque l'enfant est survolé, la couleur d'arrière-plan du frère ou de la sœur change, cachant ainsi l'arrière-plan du parent.

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn