Bonjour,

sur :
http://icreatorbeta.free.fr/

j'ai dans mon menu des boutons (accueil, blog, contact ....).
En passant la souris dessus, le bouton devient noir INSTENTANÉMENT.

J'aimerai que le bouton devienne noir mais progressivement. Et qu'il redevienne normal en enlevant la souris, progressivement aussi.

Seulement mon code n'a pas l'air de fonctionner.

Je voulais savoir si vous aviez une idée d'où peut venir mon problème ?

Je vous remercie d'avance !

NB : l'animation est appliquée que dans le bouton ACCUEIL, je ferais le reste une fois que le code sera juste

HTML :

Code : 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
 <!-- BOUTONS ACCUEIL -->
 
			<nav id="heada"> 
				<ul id="header-menu" >
					<li class="header-menu-choix" >
 
<a href="#" style="-webkit-	transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out;transition: all 0.8s ease-in-out;">Accueil</a></li>
 
					<li class="header-menu-choix"><a href="#">Blog</a></li>
					<li class="header-menu-choix"><a href="#">Contact</a></li>
					<li class="header-menu-choix"><a href="#">Parrainage</a></li>
					<li class="header-menu-choix"><a href="#">Produits</a></li>
					<li class="header-menu-choix"><a href="#">Partenaires</a></li>
				</ul>
			</nav> 
 
  						</div>

CSS :

Code : 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
/* ACCUEIL */
 
 
#heada {
	width: 100%;
	float:left;
}
#header-menu {
	margin: 0;
	padding: 1ex;
}
.header-menu-choix {
	display: inline-block;
	margin-top: 10px;
 
}
.header-menu-choix a {
	display: block;
	color: black;
	font-size: 150%;
	padding: 1em;
	font-variant: small-caps;
	text-decoration: none;
	line-height: 10px;
	border-radius: 2ex;
 
	-o-transition: background-color 0.8s; -moz-transition: background-color 0.8s; -webkit-transition: background-color 0.8s; transition: background-color 0.8s;
 
 
	}
.header-menu-choix a:hover {
 
 
background: rgb(79,80,86); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(79,80,86,1) 0%, rgba(73,76,79,1) 45%, rgba(10,14,10,1) 60%, rgba(10,8,9,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(79,80,86,1)), color-stop(45%,rgba(73,76,79,1)), color-stop(60%,rgba(10,14,10,1)), color-stop(100%,rgba(10,8,9,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5056', endColorstr='#0a0809',GradientType=0 );  /* IE6-9 */
 
	text-decoration: none;
	color: white;	
	}

<config>Mac OS X / Chrome 21.0.1180.89</config>