Comment - Afficher un élément au survol
Découvrez comment afficher un élément au survol.
Survolez-moi.
I am shown when someone hovers over the div above.
Comment afficher un élément au survol
Étape 1) Ajoutez du HTML :
Exemple
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when
someone hovers over the div above.</div>
Étape 2) Ajoutez CSS :
Exemple
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
Exemple expliqué
Le sélecteur de frère adjacent ( +
) sélectionne tous les éléments qui sont les frères adjacents d'un élément spécifié.
Le mot "adjacent" signifie "immédiatement après", et l'exemple ci-dessus sélectionne tous les éléments avec class=".hide"
, qui sont placés immédiatement après les éléments avec class=".myDIV
", au survol.
Accédez à notre didacticiel sur les combinateurs CSS pour en savoir plus sur les sélecteurs adjacents.