5568 sujets

Sémantique web et HTML

[Résolu] Associer images à menu lors du passage de la souris

Bonjour,

J'essaye de créer un menu en html et css grâce au balises <ul> et <li>. Je souhaiterais associer à chaque balise <li> (donc à l'élément du menu) une image (list-style-image:url(monImage)) lors du passage de la souris sur cet élément (avec li:hover). J'arrive à mettre la même image pour tous les éléments mais je n'arrive pas à faire en sorte que l'image soit différente selon l'élément du menu.

Rien ne s'affiche quand le passe la souris sur le menu (alors que l'image devrait s'afficher).

Voici mon code (j'ai mis en gras ce qui ne semble pas fonctionner) 


<html>
    <head>
		<title>Index</title>		
		<style type="text/css">
			.navigation
				{
					border-style:inset;
					background-color:#ffffff;
					
					width:300px;
				}
			.navigation li
				{
					
					font-family:"Arial";
					font-size:20px;
					background-color:yellow;
					margin-bottom:15px;
					width:250px;
					height:30px;
					margin-left:0px;
					padding-top:5px;
					list-style-type:none;	
					list-style-image:none;
				}
				
					
			
			[b].soleil li:hover 
				{
					list-style-image:url(images/saturne.gif);
					
				}
			.mercure li:hover
				{
					
					list-style-image:url(images/mercure.gif);
				}
	[/b]
		</style>


	</head>


	<body>
		<ul class="navigation">
			<li class="soleil"><a href="soleil.htm" >Saturne</a></li>
			<li class="mercure"><a href="mercure.htm">Mercure</a></li>
		</ul>
	</body>
</html>


De toute évidence, quelque chose semble m'échapper.

Pouvez-vous m'aider svp ?
Merci d'avance
Modifié par johnlock (05 Jul 2007 - 18:14)
Salut,

Tout bêtement car ton sélecteur CSS n'est pas bon.

.soleil li:hover

signifie que tu appelle l'élément <li> en position "hover" qui est contenu dans un parent de classe "soleil".

Pour que ta sélection fonctionne, il faut que tu assigne la sélection de classe au <li> :
li.soleil:hover


Un petit tour sur cet article et celui-ci enrichiront tes connaissances en matière de sélecteurs en CSS. Smiley cligne
Bonjour

Je te remercie beaucoup Mikachu, je ne faisait pas la distinction entre

.soleil li:hover et li.soleil:hover

Je vais étudier les liens.

A plus tard
Sujet clos
Aller à