Mengapa Latar Belakang Menu Hover Saya Tidak Beralih dengan Lancar?

Kesan Peralihan untuk Menuju Latar Belakang Menu

Soalan:

Walaupun menggunakan peralihan CSS, warna latar belakang item menu tidak tidak berubah dengan lancar pada hover. Berikut ialah CSS yang berkaitan:

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    -moz-transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

Jawapan:

Sokongan penyemak imbas adalah penting untuk peralihan berfungsi dengan betul. Pada masa penulisan, peralihan disokong dalam:

• Safari
• Chrome
• Firefox
• Opera
• Internet Explorer 10

Untuk mencapai pudar yang diingini kesan, pertimbangkan CSS berikut:

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

Ini memastikan peralihan warna latar belakang berfungsi dalam penyemak imbas yang disokong, mewujudkan kesan pudar yang lancar apabila menuding pada pautan menu:

<a>Navigation Link</a>

Atas ialah kandungan terperinci Mengapa Latar Belakang Menu Hover Saya Tidak Beralih dengan Lancar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!