ホバー メニューの背景がスムーズに移行しないのはなぜですか?

ホバーリングメニュー背景のトランジション効果

質問:

CSS トランジションを使用しているにもかかわらず、メニュー項目の背景色が変化します。ホバー時にスムーズに変化しません。関連する CSS は次のとおりです:

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

回答:

トランジションが正しく機能するにはブラウザのサポートが不可欠です。この記事の執筆時点では、移行は以下でサポートされています:

• Safari
• Chrome
• Firefox
• Opera
• インターネットExplorer 10

目的のフェード効果を実現するには、次の点を考慮してください。次の 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;
}

これにより、サポートされているブラウザで背景色の遷移が確実に機能し、メニュー リンクの上にマウスを移動したときに滑らかなフェード効果が作成されます:

<a>Navigation Link</a>

以上がホバー メニューの背景がスムーズに移行しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。