Chuyển đổi màu nền

Tôi đang cố gắng tạo hiệu ứng chuyển tiếp background-colorkhi di chuột vào các mục menu, nhưng nó không hoạt động. Đây là mã CSS của tôi:

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

Đây #nav divlà một uldanh sách thực đơn của các mặt hàng.

Theo tôi biết, các hiệu ứng chuyển đổi hiện đang hoạt động trong Safari, Chrome, Firefox, Opera và Internet Explorer 10+.

Điều này sẽ tạo ra hiệu ứng mờ dần cho bạn trong các trình duyệt này:

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>

Lưu ý: Như Gerald đã chỉ ra trong các nhận xét, nếu bạn đặt quá trình chuyển đổi a, thay vì trên a:hoverđó, nó sẽ mờ dần trở lại màu ban đầu khi chuột của bạn di chuyển ra khỏi liên kết.

Điều này cũng có thể có ích: CSS Nguyên tắc cơ bản: Chuyển tiếp CSS 3

Đối với tôi, tốt hơn là đặt mã chuyển đổi với các bộ chọn gốc / tối thiểu hơn là với: hover hoặc bất kỳ bộ chọn bổ sung nào khác:

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