Bagaimana Saya Boleh Melambatkan Kesan :hover dalam CSS Tanpa JavaScript?

Melengahkan Kesan :hover dalam CSS

Bolehkah anda menangguhkan acara :hover tanpa menggunakan JavaScript?

Adalah mungkin untuk melambatkan penggunaan kesan hover dalam CSS dengan menggunakan peralihan.

Cara melengahkan kesan :hover menggunakan peralihan:

Pertimbangkan kod CSS berikut:

div {
    transition: 0s background-color;
}

div:hover {
    background-color: red;
    transition-delay: 1s;
}

Dalam contoh ini, sifat tunda peralihan ditetapkan kepada 1 saat. Ini menyebabkan perubahan warna latar belakang ditangguhkan selama 1 saat apabila keadaan :hover dimasukkan.

Contoh:

<div>delayed hover</div>

Demonstrasi visual:

display:inline-block;
padding:5px;
margin:10px;
border:1px solid #ccc;
transition: 0s background-color;
transition-delay:1s;

background-color: red;

Demonstrasi ini menunjukkan elemen div dengan kesan tuding tertunda pada perubahan warna latar belakang, menunjukkan cara anda boleh memanfaatkan peralihan untuk melambatkan kesan tuding dalam CSS.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Melambatkan Kesan :hover dalam CSS Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!