Comment afficher un élément lors du survol de la souris

Comment afficher un élément lors du survol de la souris

Première étape - Ajouter HTML :

<div class="myDIV">Mettez le curseur sur moi.</div>
<div class="hide">Quand quelqu'un met le curseur sur ce div, il apparaîtra.</div>

Deuxième étape - Ajouter CSS :

.hide {
  display: none;
}
.myDIV:hover + .hide {
  display: block;
  color: red;
}

Essayez-le vous-même

Explication de l'exemple :

Sélecteur d'éléments adjacents de même niveau (+). Sélectionne tous les éléments adjacents à l'élément spécifié.

Le mot "adjacent" signifie "suivant", l'exemple ci-dessus sélectionne tous les éléments portant class=".hide" Les éléments, ces éléments sont placés immédiatement après le placement de ceux qui sont en survol sur celui qui a class=".myDIV" après l'élément.

Pages associées

Tutoriel :Compositeur CSS