การเปลี่ยนสีพื้นหลัง

ฉันกำลังพยายามเปลี่ยนเอฟเฟกต์ด้วย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รายการเมนูของรายการ

เท่าที่ฉันรู้ว่าช่วงการเปลี่ยนภาพทำงานใน 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แทนที่จะa:hoverเป็นสีจะจางหายไปกลับเป็นสีดั้งเดิมเมื่อเมาส์ของคุณเลื่อนออกจากลิงค์

สิ่งนี้อาจมีประโยชน์เช่นกัน: CSS พื้นฐาน: การเปลี่ยน CSS 3

สำหรับฉันจะเป็นการดีกว่าถ้าวางรหัสการเปลี่ยนแปลงด้วยตัวเลือกดั้งเดิม / ขั้นต่ำกว่าด้วย: โฮเวอร์หรือตัวเลือกเพิ่มเติมอื่น ๆ :

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