Comme faire dérouler une liste quand on survole un mot ou autre?
Résolu
emmanuelzem
-
emmanuelzem -
emmanuelzem -
Bonjour, je sais programer en html, css, php mais pas javascript et j'aimerais savoir quel programmation correspond à faire dérouler une liste quand en survole un mot ou faire apparaître une liste lors qu'on survole un mot et quel code.
ex : je passe mon curseur sur un bouton astuce et ça affiche : les astuces du jour les tops des astuces quelque chose comme ça.
ex : je passe mon curseur sur un bouton astuce et ça affiche : les astuces du jour les tops des astuces quelque chose comme ça.
A voir également:
- Comme faire dérouler une liste quand on survole un mot ou autre?
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Trousseau mot de passe iphone - Guide
- Mot de passe - Guide
- Mot de passe administrateur - Guide
2 réponses
Pas forcément besoin de JS... en css :
- Soit un élément caché d'astuce avec la classe .astuce
- Soit un span avec la classe show qui sert à montrer une astuce
CSS :
HTML :
Voilà :) L'enui de cette solution après c'est que lorsque le curseur quite la zonne du .show le .astuce disparait. Si tu veux vraiment du JS (je te montre avec jquery, plus simple) :
On garde les même classe et le même html.
Là, quand il survole .show l'astuce d'après ce montre, et s'il re survole ce .show, l'astuce d'après se cache.
- Soit un élément caché d'astuce avec la classe .astuce
- Soit un span avec la classe show qui sert à montrer une astuce
CSS :
.astuce{
display: none;
}
.show:hover + .astuce{
display: block;
}
HTML :
<span>Astuce #1</span>
<div class="astuce">
MON ASTUCE !
</div>
<span>Astuce #2</span>
<div class="astuce">
MON ASTUCE 2 !
</div>
<span>Astuce #3</span>
<div class="astuce">
MON ASTUCE 3 !
</div>
Voilà :) L'enui de cette solution après c'est que lorsque le curseur quite la zonne du .show le .astuce disparait. Si tu veux vraiment du JS (je te montre avec jquery, plus simple) :
On garde les même classe et le même html.
$(document).on("hover", ".show", function(){
$(this).next(".astuce').toggle("400");
});
Là, quand il survole .show l'astuce d'après ce montre, et s'il re survole ce .show, l'astuce d'après se cache.