Comment affecter d'autres éléments lorsqu'un élément est survolé
P粉769413355
2023-08-27 12:48:40
<p>Ce que je veux faire, c'est que lorsqu'un <code>div</code> est survolé, cela affecte les propriétés d'un autre <code>div</code>. </p>
<p>Par exemple, dans cette démo JSFiddle, lorsque vous survolez <code>#cube</code>, cela change le <code>background-color</code> au-dessus de <code>#container</code>, <code>#cube</code> ≪!-- p-->
</p><p><br /></p>
<pre class="brush:css;toolbar:false;">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></pre>
<p><br /></p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.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; }