Pourquoi l'arrière-plan de mon menu de survol ne se transforme-t-il pas en douceur ?

Effet de transition pour l'arrière-plan du menu survolé

Question :

Malgré l'utilisation de transitions CSS, la couleur d'arrière-plan des éléments de menu ne ne change pas en douceur en survol. Voici le CSS pertinent :

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    -moz-transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

Réponse :

La prise en charge du navigateur est essentielle au bon fonctionnement des transitions. Au moment de la rédaction, les transitions sont prises en charge dans :

• Safari
• Chrome
• Firefox
• Opera
• Internet Explorer 10

Pour obtenir l'effet de fondu souhaité, considérez ce qui suit CSS :

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;
}

Cela garantit que les transitions de couleurs d'arrière-plan fonctionnent dans les navigateurs pris en charge, créant un effet de fondu fluide lorsque vous survolez les liens de menu :

<a>Navigation Link</a>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!