☰

背景色の遷移 質問する

tag-icon • tag-icon css
背景色の遷移 質問する

メニュー項目にマウスを移動したときにトランジション効果を作成しようとしていますbackground-colorが、うまくいきません。これが私の CSS コードです:

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    /* Firefox */
    -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 1s ease-in;
    /* Opera */
    -o-transition: all 1s ease-in;
    /* Standard */
    transition: all 1s ease-in;
}

#nav div項目のメニューリストですul。

ベストアンサー1

私の知る限り、トランジションは現在、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;
}
<a>Navigation Link</a>

注:aコメントで Gerald が指摘したように、ではなく にトランジションを設定すると、a:hoverマウスがリンクから離れたときに元の色に戻ります。

これも役に立つかもしれません:CSS の基礎: CSS 3 トランジション

追伸

@gak として下記にコメントしてください

ユーザーがリンクからマウスを離したときに元の画像に戻るトランジションを追加することもできますcontent #nav a。

おすすめ記事