Sujet Précédent Sujet Suivant

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

Fermé
Dédé86 Messages postés 682 Date d'inscription vendredi 23 décembre 2005 Statut Membre Dernière intervention 14 mars 2017 - 4 juil. 2007 à 15:44
Daddy Cool Messages postés 68 Date d'inscription samedi 29 mars 2008 Statut Membre Dernière intervention 24 octobre 2014 - 15 avril 2008 à 10:49
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
A voir également:

3 réponses

Réponse 1 / 3
youplaboum
4 juil. 2007 à 17:57
essaye sa dans ton css

li:hover.soleil {
................;;
1
Réponse 2 / 3
Dédé86 Messages postés 682 Date d'inscription vendredi 23 décembre 2005 Statut Membre Dernière intervention 14 mars 2017 208
4 juil. 2007 à 18:46
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
1
Daddy Cool Messages postés 68 Date d'inscription samedi 29 mars 2008 Statut Membre Dernière intervention 24 octobre 2014 6
29 mars 2008 à 01:58
ç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.

++
0
Réponse 3 / 3
Devilish Messages postés 1425 Date d'inscription lundi 7 avril 2008 Statut Membre Dernière intervention 26 janvier 2009 37
11 avril 2008 à 06:52
Il y a aussi internet explorer qui n'applique le hover qu'au lien aussi je crois...(Me frappé pas si j'ai tord)...
1
Daddy Cool Messages postés 68 Date d'inscription samedi 29 mars 2008 Statut Membre Dernière intervention 24 octobre 2014 6
15 avril 2008 à 10:49
si si, tu as tout à fait raison ;)
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses