Afficher un div au survol d’un autre div : html et css

Dans certains cas lors de la création d’un site internet, il peut être intéressant d’afficher un div au survol d’un autre div (afficher un texte au survol d’un autre texte), sans utiliser le javascript, mais uniquement en html et css :

Comment afficher un <div> au survol d’un autre <div> en html et css ?

Pour afficher un div (ou une div si l’on parle de la balise…) au survol d’un autre div, il va vous falloir deux div imbriqués, avec un parent et un enfant donc. Exemple pour la page html :

<div class="parent">
Comment afficher un div au survol d'un autre div ? (texte à afficher en permanence)
<div class="enfant">
Il suffit d'utiliser deux div imbriquées et le deuxième div s'affichera au survol du 
premier grâce à la feuille de style css !
</div>
</div>
Div au survol d'un autre div

Puis pour la feuille de style :

div.enfant
{
 display: none;
}

div.parent:hover .enfant{
	display:block;
}
Feuille de style CSS pour afficher du texte au survol d'un autre texte

Ce code vous permettra donc d’afficher du texte au survol d’un autre texte en html et css, sans javascript. On notera qu’on peut faire la même chose pour afficher du texte au survol d’une image.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *