Comment affecter d'autres éléments lorsqu'un élément est survolé

Question

Ce que je veux faire, c'est que lorsqu'un div est survolé, cela affecte les propriétés d'un autre div.

Par exemple, dans cette démo JSFiddle, lorsque vous survolez #cube, cela change le background-color au-dessus de #container, #cube ≪!-- p-->

div {
  contour : 1px rouge uni ;
}

#récipient {
  largeur : 200 px ;
  hauteur : 30px ;
}

#cube {
  largeur : 30 px ;
  hauteur : 100 % ;
  couleur de fond : rouge ;
}

#cube : survoler {
  largeur : 30 px ;
  hauteur : 100 % ;
  couleur de fond : bleu ;
}</pré>
<pre class="brush:html;toolbar:false;"><div id="container">
  <div id="cube">
  </div>
</div>

Answer 1

Dans cet exemple spécifique, vous pouvez utiliser :

#container:hover #cube {
    background-color: yellow;   
}

Cet exemple ne fonctionne que pour les enfants de cube 是 container . Pour des scénarios plus complexes, vous devrez utiliser différents CSS ou utiliser JavaScript.

Answer 2

Si le cube est directement à l'intérieur du conteneur :

#container:hover > #cube { background-color: yellow; }

Si le cube est à côté du conteneur (après le repère de fermeture du conteneur) :

#container:hover + #cube { background-color: yellow; }

Si le cube se trouve quelque part à l'intérieur du conteneur :

#container:hover #cube { background-color: yellow; }

Si le cube est un frère du conteneur :

#container:hover ~ #cube { background-color: yellow; }