ホームページ > ウェブフロントエンド > CSSチュートリアル > ホバー メニューの背景がスムーズに移行しないのはなぜですか?

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

DDD
リリース: 2024-12-05 09:33:09
オリジナル
882 人が閲覧しました

Why Isn't My Hover Menu Background Transitioning Smoothly?

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

質問:

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート