28172 sujets

CSS et mise en forme, CSS3

Faire un "hover" en CSS

Bonjour,
Je souhaite qu'au survol de mon bouton accueil celui ci change de couleur. J'ai donc fait un bouton accueil en bleu (par défaut), et un bouton accueil en vert.
Voila le code css pour le placer sur la page :

#accueil {
	 width:120px;
	 height:30px;
	 position:absolute;
     left: 40px; 
     margin-left: 0px; 
	 top:210px;
}


Et voila mon code html

<div id="accueil"><a href="http://www"><img src="images/accueil.png" alt="Accueil" ></a></div>

Comment puis je faire pour qu'au survol il prenne en compte mon bouton vert?

Par avance merci
Le CSS ne permet pas de changer directement une image en changeant l'attribut src. Mais par contre, il permet de changer l'image de fond d'un élément.

<div id="accueil"><a href="...">Accueil</a></div>


#accueil {
width:120px;
height:30px;
position:absolute;
left: 40px; 
margin-left: 0px; 
top:210px;
background-image:url('images/accueil1.jpg');
}

#accueil:hover {
background-image:url('images/accueil2.jpg');
}


Dans le code que je t'ai donné, j'ai remplacé l'image par du texte. Ce serait une bonne chose de ne pas mettre ce texte en image si tu n'y es pas obligé.
Déjà je vois pas pourquoi tu rajoutes un <div> alors que tu peux simplement styler ton <a...> et en lui ajoutant la propriété display:block,;


<a id="accueil" href="...">Accueil</a>

#accueil {
display:block;
width:120px;
height:30px;
...


Pour le reste : comme superjun.
Modifié par jb_gfx (03 Sep 2008 - 18:03)
Bonsoir rica,

En survolant ton problème, j'ai vu que tu utilisais la propriété position.
Dans ce cas-là, les propriétés margin sont totalement inutiles : elles sont remplacées par les propriétés top, right, bottom, left.

N'hésite pas à lire les différents tutoriaux et exemples présents sur le site, ils pourront t'être très utiles.
Bonne lecture et bonne continuation Smiley cligne
Sujet clos
Aller à