web-dev-qa-db-ja.com

背景色の遷移

メニュー項目の上にマウスを置いたときに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;
}

#navdivは項目のメニューulリストです。

css3
244
jean-guy

私の知る限りでは、トランジションは現在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>

注： コメントでGeraldが指摘しているように、遷移をa:hoverではなくaに置くと、マウスがリンクから離れると元の色にフェードバックします。

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

472
Ilium

私には、：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>
70
Reza Mamun