Changer la couleur d'un bouton lors du survol.

**DetoX** · 14/05/2009, 23h14

bonsoir tout le monde,

Déjà un grand merci pour cette aide précieuse.

voila mon code

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<BODY BGCOLOR="#ffffff" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height=100%>
 
	<tr>
		<td  background="images/top_g.gif" colspan=3><img src="images/header.png"></td>
 
	</tr>
	<tr>
		<td background="images/menu3.gif" colspan=3>
			<table  border="0" cellspacing="0" cellpadding="0">
				<tr>	
					<td background="images/menu1.gif" width=100 align=center><a href="index.html">Accueil</a></td>
					<td ><a href="coach.html">Coach à domicile</a></td>
					<td><img src="images/menu2.gif"></td>
					<td ><a href="professionnels.html">Professionnels</a></td>
					<td><img src="images/menu2.gif"></td>
					<td ><a href="">Activités</a></td>
					<td><img src="images/menu2.gif"></td>
					<td ><a href="tarifs.html">Tarifs</a></td>
					<td><img src="images/menu2.gif"></td>
					<td ><a href="mailto:test@test.test" title="contact mail">Me contacter</a></td>
					<td><img src="images/menu2.gif"></td>
				</tr>
			</table>
		</td>
	</tr>

Je voudrais que les boutons soient colorés en noir au passage de la souris .. comment faire .?

merci.

**Macmillenium** · 14/05/2009, 23h36

Bonsoir,

Tout d'abord je te conseil de faire un petit tour par là

Pour revenir à ton problème, il suffit d'appliquer le style sur l'élément <a> dans son état survolé, c'est à dire, via le pseudo-classe dynamique :hover :

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
			<table class="monTableau"  border="0" cellspacing="0" cellpadding="0">
				<tr>	
					<td background="images/menu1.gif" width=100 align=center><a href="index.html">Accueil</a></td>
					<td ><a href="coach.html">Coach à domicile</a></td>
					<td><img src="images/menu2.gif"></td>
					<td ><a href="professionnels.html">Professionnels</a></td>
					<td><img src="images/menu2.gif"></td>
					<td ><a href="">Activités</a></td>
					<td><img src="images/menu2.gif"></td>
					<td ><a href="tarifs.html">Tarifs</a></td>
					<td><img src="images/menu2.gif"></td>
					<td ><a href="mailto:test@test.test" title="contact mail">Me contacter</a></td>
					<td><img src="images/menu2.gif"></td>
				</tr>
			</table>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.monTableau a:hover {
   color:#000000
}

**12monkeys** · 14/05/2009, 23h37

Bonsoir

En utilisant la pseudo-classe :hover par exemple...

Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
a:hover {
    background-image: url('mon_image.jpg');
}

A noter que :hover ne va fonctionner que sur un lien <a> avec IE 6

**DetoX** · 15/05/2009, 21h17

bonsoir à vous tous ...

merci pour les raiponce 12monkeys et Macmillenium . si je veux que le changement de couleur soi pris en compte par touts les explorateurs web que dois je faire ... si quelqu'un voudrais aider une fille dans le besoin sa serai cool merci encor

**12monkeys** · 15/05/2009, 21h49

Les deux exemples que nous t'avons donné sont normalement valables avec tous les navigateurs actuels (y compris IE6)...

Changer la couleur d'un bouton lors du survol.

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager