Rechercher : dans
Par :

Astuce pour afficher/masquer un div en css

Dernière réponse le 7 jui 2009 à 22:18:10 Sativindica, le 14 avr 2009 à 16:04:53 
 Signaler ce message aux modérateurs

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+

Meilleures réponses pour « Astuce pour afficher/masquer un div en css » dans :
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...

1

 cgo, le 7 jui 2009 à 22:18:10

Et bien, merci beaucoup à toi ! ça fonctionne super bien !

Répondre à cgo