transition ne marche pas avec background-color

[Nenex]

Slt

J'ai un souci un peu zarbi. J'ai fait un bouton avec une transition sur le color et le background-color. Pour le color, la couleur change ainsi que la duree du changement, mais pour le background-color rien ne marche. J'ai essayer de faire la transition avec border, font-size et border-radius et ca marche tres bien. Alors pourquoi ca ne marche pas avec background-color ????

Mon CSS:

.bouton {	text-align:center;}.bouton a,.bouton a:link,.bouton a:visited,.bouton a:active,.bouton a:focus {	font-family:Verdana,Helvetica,Sans-Serif;	color: #fff !important;	font-weight:bold;	font-size: 1.3em;	text-decoration: none !important;	border-radius:7px;	padding: 3px 10px;	background-color:#6a04aa;	transition: all 5s ;		-webkit-transition: all 2s ;	-moz-transition: all 2s ;	-ms-transition: all 2s ;	-o-transition: all 2s ;}.bouton a:hover {	color:#ccff00 !important;	background-color:#000 !important;}

Le html :

<div class="bouton bouton-telecharger-photos"><a href="#">Télécharger</a></div>

Merci d'avance pour votre aide.

Modifié 6 Mai 2014 par Nenex

[Dudu]

Salut

Plusieurs pistes pour isoler le problème :

• Ce comportement est-il le même sur différents navigateurs ?

• En ciblant la propriété background-color seule, est-ce que ça marche ? (c'est-à-dire en remplaçant «all» par «background-color»)

• En supprimant la transition, c'est-à-dire sur un simple survol sans effets, est-ce que la couleur de fond change ?

• En ciblant le survol du div au lieu du survol du lien, ça donne quoi ?

• Ce div autour du lien a-t-il une véritable utilité ? Pourquoi ne pas écrire <a class="bouton bouton-telecharger-photos" href="#"> ?

Ça me semblerait mille fois plus simple, plus lisible, plus logique. Il faudrait simplement déclarer le lien en block puisqu'il est inline par défaut.

Tiens-nous au courant !

[Nenex]

Merci pour ta reponse et tes pistes.

Salut

Plusieurs pistes pour isoler le problème :

• Ce comportement est-il le même sur différents navigateurs ?

Je ne peut malheureusement pas tester car je fait le site avec Joomla et je suis en local avec Serveur2Go et je peux pas changer de navigateur. Mais la j'ai commence a envoyer le site sur le serveur, donc je testerais quant ca sera fait.

• En ciblant la propriété background-color seule, est-ce que ça marche ? (c'est-à-dire en remplaçant «all» par «background-color»)

Avant de mettre all j'avais cible la propriete background-color seule. Mais c'etait pareil

• En supprimant la transition, c'est-à-dire sur un simple survol sans effets, est-ce que la couleur de fond change ?

• En ciblant le survol du div au lieu du survol du lien, ça donne quoi ?

Pareil.

• Ce div autour du lien a-t-il une véritable utilité ? Pourquoi ne pas écrire <a class="bouton bouton-telecharger-photos" href="#"> ?
Ça me semblerait mille fois plus simple, plus lisible, plus logique. Il faudrait simplement déclarer le lien en block puisqu'il est inline par défaut.

C'est vrais que j'ai pas vraiment simplifie mon code. Je vais tester sans la div et mettre mes class directement dans la balise <a>.

Je te tiens au jus.

[Nenex]

J'ai vire la div comme tu me le conseil (c'est vrais qu'elle n'a aucune utilite). Donc ca donne ca :

<a class="bouton jcepopup noicon" href="#" target="_blank">Bouton</a>

J'ai egalement modifie un peu le CSS. J'ai changer

.bouton a,

.bouton a:link,

.bouton a:visited,

.bouton a:active,

.bouton a:focus

par

.bouton

Mais il m'arrive un truc tres zarbi : quant je passe le curseur sur le bouton la couleur disparait et ca devient transparent... (meme sans les effets, en ne ciblant que la propriete background-color seule et pour le navigateur l'envoi des fichiers n'est toujours pas finit, donc je peux pas tester).).