18041 sujets

Questions générales et questions de débutants

[résolu] Rollover sur menu

Bonjour, je souhaiterai avoir un effet rollover sur mon menu, mais je n'y arrive pas !

Voici le code html :
<a href="/"><img src="images/menu_1.jpg" width="98" height="40" class="menu1"/></a>
<a href="/"><img src="images/menu_2.jpg" width="113" height="40" class="menu2"/></a>
<a href="/"><img src="images/menu_3.jpg" width="106" height="40" class="menu3"/></a>


Lorsque j'essaie ceci dans mon css:
#site .menu1{
	position:absolute;
	top:120px;
	left:200px;
	border: none;
}
#site .menu2{
	position:absolute;
	top:120px;
	left:290px;
	border: none;
	z-index:1;
}
#site .menu3{
	position:absolute;
	top:120px;
	left:390px;
	border: none;
}
#site .menu1 a:hover{
background-image:url(images/menu_rool_1.jpg);
background-repeat:no-repeat;
text-decoration:none;
}


Il ne se passe rien au survol de la souris. Savez-vous pourquoi ?

Merci à tous
Modifié par Furox (20 Jan 2011 - 18:52)
En même temps tu notes :
#site .menu1 a:hover{

et
<a href="/"><img src="images/menu_1.jpg" width="98" height="40" class="menu1"/></a>


Dans la logique du CSS la balise <a> se trouve dans la class "menu1".
Et dans la logique de ton code, c'est l'inverse (la class "menu1" se trouve dans ta balise <a>).

EDIT : J'ai mal lu la structure de ton menu.
Si tu applique un background-image sur une image ca va pas être terrible, ca changera pas ton "src".
Si tu veux changer le background au hover, tu dois d'abord en appliquer un dans ta balise <a>.

En bref, tu vire t'es balises <img>, tu transformes t'es balises <a> en block pour leur donner une taille et tu leur applique le background basique (celui de ta balise <img>).
Puis tu ajouter le second background sur le hover.
Modifié par fogofo (20 Jan 2011 - 17:36)
J'ai finalement décidé d'utiliser le tutorial d'alsacréations et j'obtiens ce code :

#navigation { 
	position:absolute;
	top:100px;
    margin: 0 ; 
    padding: 0 ; 
    list-style: none ; 
    text-align: center ; 
    }
#navigation li { 
    display: inline ; 
    margin-right: 1px ; 
    color: #fff ; 
    background: #c00 ; 
    }
#navigation li a { 
    display: block ; 
	display: inline ; 
    background: #c00 url(images/menu_1.png) left top no-repeat ; 
    color: #fff ; 
    font: 1em "Trebuchet MS",Arial,sans-serif ; 
    line-height: 1em ; 
    padding: 4px 0 ; 
    text-align: center ; 
    } 
#navigation li a:hover, #navigation li a:focus, #navigation li a:active { 
    background: #900 url(images/menu_1.png) left top no-repeat ; 
    }


Le seul problème c'est qu'à l'affichage ça n'affiche pas mon image, mais simplement le code couleur #c00 ; pourtant le code semble bon.

Help !
Sujet clos
Aller à