J'essaie de faire un effet de transition avec le background-color
survol des éléments de menu, mais cela ne fonctionne pas. Voici mon code CSS:
#content #nav a:hover {
color: black;
background-color: #AD310B;
/* Firefox */
-moz-transition: all 1s ease-in;
/* WebKit */
-webkit-transition: all 1s ease-in;
/* Opera */
-o-transition: all 1s ease-in;
/* Standard */
transition: all 1s ease-in;
}
Il #nav
div
s'agit d'une ul
liste de menus d'éléments.
Réponses:
Pour autant que je sache, les transitions fonctionnent actuellement dans Safari, Chrome, Firefox, Opera et Internet Explorer 10+.
Cela devrait produire un effet de fondu pour vous dans ces navigateurs:
Remarque: Comme l'a souligné Gerald dans les commentaires, si vous placez la transition sur le
a
, au lieu de sur,a:hover
elle se fondra à la couleur d'origine lorsque votre souris s'éloignera du lien.Cela pourrait également être utile: Principes de base de CSS: Transitions CSS 3
la source
content #nav a
pour revenir à l'original lorsque l'utilisateur éloigne la souris du lien.transition:
dans le non-vol stationnaire? Je pense qu'à chaque fois que l'utilisateur survole, la transition est compilée ..transition
ne peut apparemment pas gérer la couleur du type "gradient linéaire" comme on peut le tester ici . Et btw, la réponse de @ Ilium mérite d'être marquée comme solution.Pour moi, il est préférable de mettre les codes de transition avec les sélecteurs d'origine / minimum qu'avec le: hover ou tout autre sélecteur supplémentaire:
la source