Bolehkah CSS Transitions Delay :hover Effects Tanpa JavaScript?

Melengahkan Kesan :hover dalam CSS

Soalan:

Adakah mungkin untuk menangguhkan pengaktifan acara CSS :hover tanpa menggunakan JavaScript? Secara khususnya, bagaimanakah perkara ini boleh dicapai semasa mensimulasikan kefungsian hoverIntent, pemalam jQuery yang popular untuk melambatkan kesan hover?

Jawapan:

Peralihan CSS boleh dimanfaatkan untuk melambatkan : kesan tuding. Berikut ialah contoh:

div {
    transition: 0s background-color;
}

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

Dalam contoh ini, warna latar belakang elemen tidak akan ditukar kepada merah sehingga satu saat selepas tetikus melayang di atasnya.

Berikut ialah demonstrasi yang lebih lengkap itu termasuk kelewatan pada kedua-dua tuding hidup dan mati:

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

div:hover {
    background-color: red;
}

<div>delayed hover</div>

Atas ialah kandungan terperinci Bolehkah CSS Transitions Delay :hover Effects Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!