Changer le style d'un lien dans une class

Bonjour,

J'ai crée un petit bouton pour ma boutique.

Le problème est que je n'arrive pas à faire en sorte qu'au passage de la souris sur le lien, ce dernier reste blanc !

<style type="text/css">
<!--
.button {
	width:60px;
	background-color:#999;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	border:#000;
	border-width:2px;
	padding-left:5px;
    padding-right:5px;
	padding-top:3px;
	padding-bottom:3px;
}
.button a:hover {
	text-decoration:underline;
	color:#FFF;
}
-->
</style>

<td align="center"><a href="https://www.pachira-international.com/myPachiraWeb/WebForme/Products/Default.aspx?category=Products" title="Boutique officielle Pachira" class="button" rel="gb_page_fs[]">Acheter</a></td>

Merci pour votre aide !

Apercu live : http://www.pachira-france.fr/boutique.html

Bonjour,

D'après le code ci-dessus, c'est normal.
Le style est appliqué à .button a:hover donc au rollover de tous les liens englobés dans la class boutton.

Pour obtenir le résultat désiré, il suffit de remplacer .button a:hover par .button:hover.

Bonjour,

Il faut revoir l'utilisation des sélecteurs en CSS !

Ton code (.button a) sélectionne tous les liens se trouvant dans un élément ayant la classe button.

Pour sélectionner le lien ayant la classe button il faut utiliser :

a.button

et pour le survol de ce lien :

a.button:hover

EDITH : Grilled
Modifié par Laurie-Anne (11 Jan 2010 - 12:33)

Hello,

De même il me semble que fixer une largeur à ton lien ne serve pas à grand chose sans la directive display placée à block (pour assurer une compatibilité entre tous les navigateurs)

.button{
 display: block;
 width: 60px;
/*etc...*/
}

N'hésitez pas à me corriger si je fais erreur ^^