Comment suspendre les effets de survol du parent lors du survol d'un élément enfant ?-tutoriel CSS-php.cn

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

Linda Hamilton

Libérer： 2024-11-02 17:50:29

original

1026 Les gens l'ont consulté

How to Suspend Parent Hover Effects When Hovering Over a Child Element?

Survol d'un élément enfant et suspension des effets de survol du parent

Lorsqu'il est imbriqué

coexistent, le survol de l'élément enfant peut interférer avec l'effet de survol appliqué à l'élément parent. À l'inverse, vous souhaiterez peut-être qu'un effet de survol sur l'élément parent soit désactivé lorsque vous survolez l'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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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!