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 :

[pastacode lang= »markup » manual= »%3Cdiv%20class%3D%22parent%22%3E%0AComment%20afficher%20un%20div%20au%20survol%20d’un%20autre%20div%20%3F%20(texte%20%C3%A0%20afficher%20en%20permanence)%0A%3Cdiv%20class%3D%22enfant%22%3E%0AIl%20suffit%20d’utiliser%20deux%20div%20imbriqu%C3%A9es%20et%20le%20deuxi%C3%A8me%20div%20s’affichera%20au%20survol%20du%20%0Apremier%20gr%C3%A2ce%20%C3%A0%20la%20feuille%20de%20style%20css%20!%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E » message= »Div au survol d’un autre div » highlight= » » provider= »manual »/]

Puis pour la feuille de style :

[pastacode lang= »css » manual= »div.enfant%0A%7B%0A%20display%3A%20none%3B%0A%7D%0A%0Adiv.parent%3Ahover%20.enfant%7B%0A%09display%3Ablock%3B%0A%7D%0A » message= »Feuille de style CSS pour afficher du texte au survol d’un autre texte » highlight= » » provider= »manual »/]

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.