Bagaimana untuk Peralihan Warna Latar Belakang dengan Lancar pada Menu Hover?

Cara Melaksanakan Peralihan Warna Latar Belakang Yang Lancar untuk Menu Hover

Mencapai kesan peralihan untuk warna latar belakang pada tuding ialah keperluan penggayaan biasa, tetapi kadangkala boleh memberikan cabaran. Di sini, kami meneroka penyelesaian kepada masalah ini.

Kod Asal

Kod CSS yang disediakan cuba melaksanakan peralihan warna latar belakang, tetapi menghadapi masalah:

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    /* Transition properties */
}

Penyelesaian

Untuk mendayakan peralihan, anda perlu memastikan sokongan merentas pelbagai pelayar. Kod dikemas kini berikut harus memberikan kesan pudar yang diingini:

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

Penjelasan

• -webkit-transition dan -ms-transition menyediakan sokongan khusus pelayar untuk peralihan dalam Safari dan Internet Explorer, masing-masing.
• peralihan ialah sifat peralihan standard yang menyokong moden pelayar.

Contoh

<a>Navigation Link</a>

Atas ialah kandungan terperinci Bagaimana untuk Peralihan Warna Latar Belakang dengan Lancar pada Menu Hover?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!