web-dev-qa-db-fra.com

Transition de couleur de fond

J'essaie de créer un effet de transition avec background-color lors du survol d'é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;
}

Le #navdiv est un menu ul liste d'éléments.

css3
261
jean-guy

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:

a {
    background-color: #FF0;
}

a:hover {
    background-color: #AD310B;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}
<a>Navigation Link</a>

Remarque: Comme l'a souligné Gerald dans les commentaires, si vous placez la transition sur a, au lieu de a:hover il reviendra à la couleur d'origine lorsque votre souris s'éloigne du lien.

Cela pourrait aussi être utile: Principes de base CSS: Transitions CSS

496
Ilium

Pour moi, il est préférable de mettre les codes de transition avec les sélecteurs original/minimum plutôt qu'avec le: hover ou tout autre sélecteur supplémentaire:

#content #nav a {
    background-color: #FF0;
    
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

#content #nav a:hover {
    background-color: #AD310B;
}
<div id="content">
    <div id="nav">
        <a href="#link1">Link 1</a>
    </div>
</div>
77
Reza Mamun