Comment le style de l'élément parent, lorsque vous survolez un élément enfant?

Question

Pour donner un exemple: considérons un bouton supprimer que lors de son survol permettra de mettre en évidence l'élément qui est sur le point de devenir supprimé:

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

Par pur CSS, comment changer la couleur d'arrière-plan de cette section, lorsque la souris est sur le bouton?

Answer 1

Eh bien, cette question est posée de nombreuses fois avant, et le peu de réponse typique est: Il ne peut pas être fait par pur CSS. C'est dans le nom: Feuilles de Style en Cascade prend uniquement en charge le style en cascade direction, pas vers le haut.

Mais dans la plupart des cas où cet effet est voulu, comme dans l'exemple donné, il y a encore la possibilité de l'utilisation en cascade de ces caractéristiques pour atteindre l'effet désiré. Considérer cette pseudo de balisage:

<parent>
    <sibling></sibling>
    <child></child>
</parent>

L'astuce consiste à donner le frère de la même taille et la position de la mère et de style de la fratrie à la place de la mère. Ce sera comme le parent est de style!

Maintenant, comment le style de la fratrie?

Lorsque l'enfant est planait, le parent est de trop, mais le frère ne l'est pas. Il en va de même pour l'enfant. Ceci conclut en trois sélecteur CSS chemins pour le style de la fratrie:

parent sibling { }
parent sibling:hover { }
parent:hover sibling { }

Ces différents chemins permettent pour certains de belles possibilités. Par exemple, la diffusion de ce truc sur l'exemple de la question des résultats dans ce violon:

div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}

Évidemment, dans la plupart des cas, cette astuce repose sur l'utilisation d'un positionnement absolu pour donner le frère de la même taille que le parent, et toujours laisser l'enfant au sein de la mère.

Parfois, il est nécessaire d'utiliser une plus qualifié sélecteur de chemin pour sélectionner un élément, comme indiqué dans ce violon qui met en œuvre le truc plusieurs fois dans l'arbre de menu. Vraiment bien.

Answer 2

il n'y a pas de sélecteur CSS pour la sélection d'un parent d'un enfant sélectionné.

vous pourriez le faire avec JavaScript