Transisi warna latar belakang

Saya mencoba membuat efek transisi background-colorketika melayang item menu, tetapi tidak berhasil. Ini kode CSS saya:

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

Ini #nav divadalah uldaftar item menu .

Sejauh yang saya tahu, transisi saat ini berfungsi di Safari, Chrome, Firefox, Opera dan Internet Explorer 10+.

Ini akan menghasilkan efek fade untuk Anda di browser ini:

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>

Catatan: Seperti yang ditunjukkan oleh Gerald dalam komentar, jika Anda menempatkan transisi pada a, alih-alih a:hoverakan memudar kembali ke warna asli ketika mouse Anda menjauh dari tautan.

Ini mungkin berguna, juga: Fundamental CSS: Transisi CSS 3

Bagi saya, lebih baik menempatkan kode transisi dengan penyeleksi asli / minimum daripada dengan: hover atau penyeleksi tambahan lainnya:

#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>