メニューホバー時の背景色をスムーズに切り替えるにはどうすればよいですか?

メニュー ホバーの背景色のスムーズなトランジションを実装する方法

ホバー時の背景色のトランジション効果を実現することは、一般的なスタイル要件です。しかし、時には課題が生じることもあります。ここでは、この問題の解決策を検討します。

元のコード

提供された CSS コードは背景色の遷移を実装しようとしましたが、問題が発生しました:

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    /* Transition properties */
}

解決策

トランジションを有効にするには、以下が必要ですさまざまなブラウザーでのサポートを確保するため。次の更新されたコードは、目的のフェーディング効果を提供する必要があります。

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

説明

• -webkit-transition および -ms-transition はブラウザ固有のサポートを提供します。それぞれ、Safari と Internet Explorer のトランジション用です。
• トランジションは、最新のサポートをサポートする標準のトランジション プロパティです。ブラウザ。

例

<a>Navigation Link</a>

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