18041 sujets

Questions générales et questions de débutants

Mettre une Tooltip, problème...

Bonjour,
J'ai placer des images les unes à cotés des autres et je voudrais que pour chacune d'elle quand la souris passe il y ai un résumé du livre/films mais j'ai beau essayer mille et une fois je n'y arrive pas, rien ne s'insère. Je vous mets ci-joint mes screen de ce que j'ai fait.

Merci encore aux personnes qui prendront le temps de m'aider.

upload/1605013078-81592-112.png

upload/1605012736-81592-10.png

upload/1605012766-81592-12.png
Modérateur
Bonjour,

Beaucoup de possibilités.

Une 1re solution, utiliser l'attribut "title". Le contenu de cet attribut est affiché au bout de quelques secondes quand on fait un hover sur l'image (adapté s'il ne s'agit que d'une courte description).

Une 2e solution, utiliser une balise html placé juste après l'image contenant le résumé, et que l'on affiche uniquement lors du hover sur l'image.

Le html :
<div class="img-area">
<img src="myImg.jpg" alt="Joli film" title="Un très joli film">
<p>Vraiment un très joli film</p>
</div>


Le css :
.img-area p{display:none;}
.img-area img:hover+p{display:block;}


Il y a pas mal d'autres solutions éventuellement.

Amicalement,
Meilleure solution
Sujet clos
Aller à