Astuce pour afficher/masquer un div en css

Sativindica Messages postés 1 Statut Membre -  
 cgo -
Bonjour,

Voilà j'ai récemment découvert une petite astuce en bidouillant mon code CSS, afin que celui-ci m'affiche du texte quand je survole un lien.

J'avais déjà cherché sur Google mais comme je n'ai entendu parlé de cette astuce nulle part, je me suis dit qu'elle pourrait être utile à quelqu'un qui ne veut pas utiliser de Javascript sur son site.

Alors il suffit de créer un div contenant un titre et le texte à afficher/masquer, et de le redimensionner afin de cacher le texte et ne plus afficher que le titre:

.mon_div
{
height: 50px; /*Hauteur du titre*/
width: 300px; /*Largeur du titre*/
overflow: hidden; /*Ceci afin de ne pas afficher le texte qui déborde du div*/
}

On donne ensuite l'ordre d'afficher la totalité du div au passage de la souris:

.mon_div:hover
{
height: 100%;
width: 100%;
}

Et l'on aura donc le texte du div qui s'affichera uniquement lorsque l'on survolera notre titre, et il se masquera de nouveau quand la souris sortira du contenu.

Voilà c'est peut-être très connu comme technique (Dans ce cas supprimez le poste il ne sert pas à grand-chose) mais je n'en ai entendu parler nulle part, je ne sais pas non plus si c'est très "propre", les experts qui sillonnent ce forum pourront me le dire!

A+
A voir également:

1 réponse

cgo
 
et bien, merci beaucoup à toi ! ça fonctionne super bien !
0