背景色の遷移

286

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項目のリスト。

css

— ジャン・ガイ
ソース

参考までに、これは現在Firefoxで動作します。FF9でテスト済み。

— C.Brown

回答:

526

私の知る限り、トランジションは現在、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代わりにと、a:hoverそれは元の色に戻ってフェードインされますときにマウスを移動離れリンクから。

これも役に立つかもしれません：CSSの基礎：CSS 3の移行

— イリウム
ソース

content #nav aユーザーがリンクからマウスを離したときに、トランジションをに入れて元に戻すこともできます。

— 2012年

ホバーとクリックによるトランジションのフィドル：jsfiddle.net/K5Qyx

— Dem Pilafian

transition:非ホバーに入れる方が良いのではないでしょうか？私は毎回ユーザーホバーは、遷移がコンパイルされていると思います。..

— マテイ

@Illium Linkは死んでいる

— フェルディネーター2014

CSS transitionは、ここでテストできるように、「線形グラデーション」のような色を処理できないようです。ところで、@ Iliumの答えはソリューションとしてマークするに値します。

— Stacky

私にとって、遷移コードは、：hoverまたはその他の追加のセレクターよりも、元のセレクター/最小のセレクターを使用する方が適切です。

#content #nav a {
    background-color: #FF0;
    
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

#content #nav a:hover {
    background-color: #AD310B;
}

<div id="content">
    <div id="nav">
        <a href="#link1">Link 1</a>
    </div>
</div>

スニペットを展開

— レザマムン
ソース

それが良いか悪いかということではありません。要素自体にトランジションを指定すると、要素がホバーされたとき、および「ホバーされなくなった」ときにアニメーション化されます。これを：hoverに適用すると、マウスが入るとアニメーションが表示されますが、マウスが離れるとアニメーションが表示されます。

— LucasBeef 2015

このソリューションは全体的に優れています。トランジション効果は、ホバーするとフェードインし、ぼかしするとフェードアウトすることが予想されます。

— Chizzle