High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

[CSS] Associer image à menu (li:hover)

Dernière réponse le 15 avr 2008 à 10:49:18 Dédé86, le 4 jui 2007 à 15:44:17 
 Signaler ce message aux modérateurs

Bonjour,

J'essaye de créer un menu en html et css grâce au balises <ul> et <li>. Je souhaiterais associer à la balise <li> (donc à l'élément du menu) une image (list-style-image:url(images/soleil.gif)) lors du passage de la souris sur cet élément. 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.

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


<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;
				}
				
			
			/*.navigation li:hover <- Ce code fonctionn, il affiche l'image du soleil pour chaque élément li
				{
					list-style-image:url(images/soleil.gif);
				}
			*/
			
			
			.soleil li:hover 
				{
					list-style-image:url(images/saturne.gif);
					
				}
			.mercure li:hover
				{
					
					list-style-image:url(images/mercure.gif);
				}
	
		</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>


J'ai utilisé une class à l'intérieur d'une class. Est-ce que cela vient de là ?

Pouvez-vous m'aider, quelque chose m'échappe
Configuration: Windows XP
Firefox 2.0.0.4

Meilleures réponses pour « [CSS] Associer image à menu (li:hover) » dans :
Réorganiser le menu Démarrer VoirAu fur et à mesure des diverses installations, le "Menu Démarrer" devient de plus en plus rempli et très mal organisé. Voilà comment procéder pour obtenir un menu organisé. Accéder au menu Démarrer Sous Vista, ce fichier est caché donc il faut...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
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...
Posez votre question Répondre

1

youplaboum, le 4 jui 2007 à 17:57:47

Essaye sa dans ton css

li:hover.soleil {
................;;

   
Répondre à youplaboum

2

Dédé86, le 4 jui 2007 à 18:46:30

Non ça ne marche toujours pas.

Ce qui m'embête, c'est que je sais pas vraiment de quoi ça vient : l'utilisation d'un class dans un autre ? Un problème d'héritage ?...

Tu peux m'aider stp ??

Merci d'avance

   
Répondre à Dédé86

3

Daddy Cool, le 29 mar 2008 à 01:58:33

ça serait plutôt de cette forme 

li.soleil:hover{...}

Quand tu fais un style du genre 
.soleil li:hover{...}

C'est comme si tu cherchais un <li> sous tes balises de la classe .soleil.

Du genre : 
<li class="soleil">
	<ul>
		<li>text</li>
	<ul>
</li>

Utilisé une class à l'intérieur d'une autre est une chose tout à fait régulière. Ça a le même effet que de déclarer un style a un id => ce qui est en-dessous va hérité du style.

++

   
Répondre à Daddy Cool

5

Devilish, le 11 avr 2008 à 06:52:26

Il y a aussi internet explorer qui n'applique le hover qu'au lien aussi je crois...(Me frappé pas si j'ai tord)...

   
Répondre à Devilish

6

 Daddy Cool, le 15 avr 2008 à 10:49:18

Si si, tu as tout à fait raison ;)

   
Répondre à Daddy Cool
Posez votre question Répondre
Ils ont besoin de votre aide