メニューの背景色にスムーズなホバートランジションを追加するにはどうすればよいですか?

トランジションを使用してメニュー ホバー効果にスムーズなトランジションを追加する

ホバー時のメニュー項目の背景色の遷移で問題が発生しています。 CSS コードに示されているように。この問題は、ブラウザでトランジションがサポートされていない可能性があることが原因です。

Safari、Chrome、Firefox、Opera、Internet Explorer 10 などの最新のブラウザでトランジションを有効にするには、コードを修正することを検討してください。

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

この改訂されたコードでは:

• 背景色のみをターゲットにするように遷移プロパティを簡略化しました。他のプロパティと競合する可能性を減らします。
• イーズインを線形に置き換えました。これにより、ブラウザ間でより一貫した遷移効果が得られます。

この更新されたコードを使用すると、サポートされているブラウザでメニュー リンクの上にマウスを移動すると、スムーズなフェード効果が観察されるようになりました。

以上がメニューの背景色にスムーズなホバートランジションを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。