Comment désactiver l'effet de survol sur le parent lors du survol d'un enfant en CSS ?-tutoriel CSS-php.cn

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

DDD

Libérer： 2024-11-03 20:12:29

original

421 Les gens l'ont consulté

How to Disable Hover Effect on Parent When Hovering Over Child in 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>

Copier après la connexion

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>

Copier après la connexion

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!