[CSS] Associer image à menu (li:hover)
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)
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
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
3 réponses
-
essaye sa dans ton css
li:hover.soleil {
................;; -
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-
ç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.
++
-
-
Il y a aussi internet explorer qui n'applique le hover qu'au lien aussi je crois...(Me frappé pas si j'ai tord)...
