Comment désactiver l'effet de survol d'un élément parent lors du survol de son enfant avec du CSS pur ?-tutoriel CSS-php.cn

Comment désactiver l'effet de survol d'un élément parent lors du survol de son enfant avec du CSS pur ?

DDD

Libérer： 2024-11-03 13:46:31

original

552 Les gens l'ont consulté

How to Turn Off a Parent Element's Hover Effect When Hovering Over Its Child with Pure CSS?

Le parent survole lorsque l'enfant survole : une approche CSS pure

Dans notre structure HTML, nous avons deux

éléments : .parent comme conteneur externe et .child comme élément interne. Par défaut, lorsque le curseur de la souris survole .parent, sa couleur d'arrière-plan passe au bleu clair. Cependant, notre objectif est de rétablir la couleur grise d'origine de l'arrière-plan de .parent lorsque le curseur passe sur .child.

Malheureusement, les sélecteurs CSS ne disposent actuellement pas de la fonctionnalité permettant de styliser un élément parent en fonction de l'état de son enfant. Pour contourner cette limitation, nous emploierons une technique astucieuse utilisant un élément frère supplémentaire.

Dans notre CSS, nous définissons l'élément .parent avec ses dimensions et son remplissage, ainsi qu'un fond gris. Lorsque la souris survole .parent, son arrière-plan devient bleu clair.

La partie cruciale est l'élément .child. Nous le positionnons à une distance au-dessus de son parent en utilisant des marges négatives (en haut : -200px ;) et lui donnons un fond gris foncé qui passe au noir au survol.

Enfin, nous introduisons l'élément .sibling. Il s'agit d'un élément d'espace réservé, positionné et dimensionné pour correspondre à .child mais situé légèrement à sa gauche et au-dessus de celui-ci. Il a également un arrière-plan coloré qui passe au blanc au survol.

Lorsque le curseur de la souris survole .child, l'élément .child passe sa couleur d'arrière-plan au noir. Simultanément, cela provoque le chevauchement de l'élément .sibling et la couverture de la partie de .parent qui était précédemment survolée. Parce que .sibling est transparent, l'arrière-plan gris d'origine de .parent redevient visible.

Par conséquent, lorsque vous survolez .child, il devient noir et masque la partie de .parent qui était précédemment mise en surbrillance. Cela crée l'illusion que l'arrière-plan de .parent a retrouvé sa couleur d'origine, même s'il est en réalité toujours gris derrière .sibling.

Malgré les limites du CSS pur dans cette situation, cette technique fournit un rendu élégant et solution efficace pour désactiver l'effet de survol sur un élément parent lorsque vous survolez son enfant.

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!