Création
d'entreprise
Posez votre question Signaler

Afficher une <div> au passage de la souris

Reivax91 158Messages postés 30 novembre 2010Date d'inscription 23 avril 2012Dernière intervention - Dernière réponse le 10 févr. 2012 à 18:49
Bonjour,
Voila je suis en train de coder un site web à partir d'une maquette, et je rencontre un petit pb dont je ne trouve pas la solution (je débute, surtout en css).
Je vais faire simple clair et rapide, j'ai un menu en liste à puce tout en haut <ul>, placé de façon horizontale (display: inline). Chaque menu est un lien <a>. Je voudrais qu'au passage de la souris sur un de ces liens, une <div> apparaisse, calée juste en dessous. En gros, je veux qu'un sous menu apparaisse sous le nom du menu.
Je sais utiliser le 'hover' en css pour styler un élément au passage de la souris sur celui-ci, mais par contre je ne trouve pas comment faire pour styler un élément A, au passage de la souris sur un autre élément B. Dans mon cas, je voudrais que la <div> de sous menu se 'style' (dans mon cas apparaisse) lorsqu'on survol un <a> de mon menu liste à puce.
J'ai trouvé une solution alternative en javascript, mais je n'ai absolument pas le droit de l'utiliser car je dois faire tout ça en html/css pour des raisons de compatibilité, et d'affichage avec notre ami du web Internet explorer (qui a inventé cette merde... ^^).
En espérant que quelqu'un pourra m'aider assez vite,
Je vous remercie d'avance,
Reivax
ps: Je vous met des extraits de mon code pour une meilleure compréhension de mes attentes :
html:
<div id='nav'>	
			<ul>
				<li><a id='menu1' href="#">Accueil</a></li>		
				<li><a id='menu2'href="#">Témoignages</a></li>
				<li><a id='menu3'href="#">Produits</a></li>	
				<li><a id='menu4'href="#">Contact</a></li>
			</ul>
</div>

<div id='optionsMenu1'>
				<p>blablablabla</p>
</div>

Ici je veux que la <div> 'optionsMenu1' apparaisse au passage de la souris sur le <a>'menu1'.
css:
#optionsMenu1 {
    position: absolute;
    width:100px;
    height:100px;
    top: 500px;
    left: 500px;
    display: none;
}
#menu1:hover + #optionsMenu1 {
    display: block;
}

Et là mon code CSS créé dans le désespoir, qui ne fonctionne évidemment pas. Je voudrais que #optionsMenu1 ne s'affiche pas dans un premier temps (display:none), et que si on survole #menu1, là, il s'affiche (display:block).
Lire la suite 

Afficher une <div> au passage de la souris »

2 réponses
Réponse
+1
moins plus
Hello,

Je te laisse regarder là-bas: http://marcarea.com/tuto/

Résultat ici: http://marcarea.com/code/css/menu/menu01test.html
Reivax91- 10 févr. 2012 à 18:49
C'est exactement ce qu'il me faut ! Tu me fais gagner un temps précieux, à peine 10min entre ma question et ta réponse, c'est magnifique ^^
Merci x1000
Ajouter un commentaire
Ce document intitulé « Afficher une <div> au passage de la souris » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?