Comment styliser l'élément parent lors du survol d'un élément enfant?

Je sais qu'il n'existe pas de sélecteur parent CSS , mais est-il possible de styliser un élément parental lors du survol d'un élément enfant sans un tel sélecteur?

Pour donner un exemple: considérez un bouton de suppression qui, lorsqu'il est survolé, mettra en évidence l'élément qui est sur le point d'être supprimé:

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

Au moyen de CSS pur, comment changer la couleur de fond de cette section lorsque la souris est sur le bouton?

Eh bien, cette question est posée plusieurs fois auparavant, et la réponse courte typique est: cela ne peut pas être fait par du CSS pur. C'est dans le nom: les feuilles de style en cascade ne prennent en charge que le style en cascade, pas vers le haut.

Mais dans la plupart des cas où cet effet est souhaité, comme dans l'exemple donné, il est toujours possible d'utiliser ces caractéristiques en cascade pour atteindre l'effet souhaité. Considérez ce pseudo balisage:

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

L'astuce consiste à donner au frère la même taille et à la même position que le parent et à styliser le frère au lieu du parent. Cela ressemblera au style du parent!

Maintenant, comment coiffer le frère?

Lorsque l'enfant est survolé, le parent l'est aussi, mais le frère ne l'est pas. Il en va de même pour le frère ou la sœur. Cela se termine par trois chemins de sélecteur CSS possibles pour styliser le frère:

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

Ces différents chemins offrent de belles possibilités. Par exemple, déchaîner cette astuce sur l'exemple de la question aboutit à 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 dépend de l'utilisation du positionnement absolu pour donner au frère la même taille que le parent, et laisser toujours l'enfant apparaître dans le parent.

Parfois, il est nécessaire d'utiliser un chemin de sélecteur plus qualifié pour sélectionner un élément spécifique, comme le montre ce violon qui implémente l'astuce plusieurs fois dans un menu arborescent. Très bien vraiment.

Je sais que c'est une vieille question, mais j'ai juste réussi à le faire sans pseudo enfant (mais un pseudo wrapper).

Si vous définissez le parent avec no pointer-events, puis un enfant divavec pointer-eventsdéfini sur auto, cela fonctionne :)
Notez que la <img>balise (par exemple) ne fait pas l'affaire.
Pensez également à définir pointer-eventssur autopour les autres enfants qui ont leur propre écouteur d'événements, sinon ils perdront leur fonctionnalité de clic.

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}    

<div class="parent">
  parent - you can hover over here and it won't trigger
  <div class="child">hover over the child instead!</div>
</div>

Edit:
Comme Shadow Wizard l'a gentiment noté: il vaut la peine de mentionner que cela ne fonctionnera pas pour IE10 et les versions antérieures. (Anciennes versions de FF et Chrome aussi, voir ici )

Une autre approche plus simple (à une vieille question) ...
consisterait à placer les éléments comme frères et sœurs et à utiliser:

Sélecteur de frères et sœurs adjacents ( +) ou sélecteur général de frères et sœurs ( ~)

<div id="parent">
  <!-- control should come before the target... think "cascading" ! -->
  <button id="control">Hover Me!</button>
  <div id="target">I'm hovered too!</div>
</div>

#parent {
  position: relative;
  height: 100px;
}

/* Move button control to bottom. */
#control {
  position: absolute;
  bottom: 0;
}

#control:hover ~ #target {
  background: red;
}

Démo Fiddle ici .

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

vous pouvez le faire avec JavaScript

Comme mentionné précédemment, "il n'y a pas de sélecteur CSS pour sélectionner un parent d'un enfant sélectionné".

Donc vous non plus:

• utiliser un hack CSS comme décrit dans la réponse de NGLN
• utiliser javascript - avec jQuery très probablement

Voici l'exemple pour le javascript / jQuery solution

Du côté javascript:

$('#my-id-selector-00').on('mouseover', function(){
  $(this).parent().addClass('is-hover');
}).on('mouseout', function(){
  $(this).parent().removeClass('is-hover');
})

Et du côté CSS, vous auriez quelque chose comme ça:

.is-hover {
  background-color: red;
}

Cette solution dépend entièrement de la conception, mais si vous avez un div parent dont vous souhaitez modifier l'arrière-plan lorsque vous survolez un enfant, vous pouvez essayer d'imiter le parent avec un ::after/ ::before.

<div class="item">
    design <span class="icon-cross">x</span>
</div>

CSS:

.item {
    background: blue;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}
.item span.icon-cross:hover::after {
    background: DodgerBlue;
    border-radius: 10px;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
}

Voir un exemple complet de violon ici

Une solution jquery simple pour ceux qui n'ont pas besoin d'une solution css pure:

    $(".letter").hover(function() {
      $(this).closest("#word").toggleClass("hovered")
    });

.hovered {
  background-color: lightblue;
}

.letter {
  margin: 20px;
  background: lightgray;
}

.letter:hover {
  background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="word">
  <div class="letter">T</div>
  <div class="letter">E</div>
  <div class="letter">S</div>
  <div class="letter">T</div>
</div>

C'est extrêmement facile à faire à Sass! Ne vous lancez pas dans JavaScript pour cela. Le sélecteur & dans sass fait exactement cela.

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand