Maison > interface Web > tutoriel CSS > Comment puis-je styliser un élément parent lorsque son enfant est survolé sans utiliser de sélecteur parent ?

Comment puis-je styliser un élément parent lorsque son enfant est survolé sans utiliser de sélecteur parent ?

Mary-Kate Olsen
Libérer: 2024-12-27 03:10:08
original
717 Les gens l'ont consulté

How Can I Style a Parent Element When Its Child is Hovered Without Using a Parent Selector?

Styler les éléments parents lors du survol des enfants sans sélecteur de parents

En CSS, cibler directement les éléments parents en fonction des interactions des enfants est un défi en raison de absence de sélecteur de parents. Cependant, il existe une solution de contournement astucieuse qui nous permet d'obtenir cet effet : créer un pseudo wrapper au sein de l'élément parent.

Considérez l'exemple donné, où un bouton de suppression met en surbrillance sa section parent au survol :

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>
Copier après la connexion

Pour mettre en évidence la section parent, nous allons créer un div enfant avec des événements de pointeur définis sur auto, tout en le désactivant pour le parent :

div.parent {
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}
Copier après la connexion

Maintenant, le parent devient transparent aux événements de la souris, permettant au div enfant de déclencher des effets de survol. Et lorsqu'un événement de survol se produit sur l'enfant, nous pouvons styliser le parent comme nous le souhaitons :

div.parent:hover {
    background: yellow;
}
Copier après la connexion

Cette technique garantit que l'élément parent répond aux interactions de survol sur son enfant, simulant efficacement le comportement d'un sélecteur parent. Notez que pointer-events: auto doit être restauré pour les autres éléments enfants avec des écouteurs d'événements afin de conserver leur fonctionnalité.

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!

source:php.cn
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal