Bagaimana Saya Boleh Membuat Kesan Hover CSS Berterusan Selepas Hover Tamat?

Menjadikan CSS Hover State Berterusan Selepas Legar Tamat

Apabila menuding pada elemen dengan CSS, anda mungkin mahu perubahan itu kekal kelihatan walaupun selepas anda berhenti melayang. Isu ini boleh timbul apabila menggunakan ciri tuding CSS untuk mendedahkan imej pada tuding.

Penyelesaian CSS:

Satu penyelesaian berkesan melibatkan penggunaan sifat tunda peralihan. Sifat ini menambah kelewatan pada peralihan dari satu keadaan ke keadaan lain, membenarkan imej kekal kelihatan selepas menuding. Berikut ialah contoh:

div img {
    position: absolute;
    opacity: 0;
    transition: 0s 180s;
}

div:hover img {
    opacity: 1;
    transition: 0s;
}

Dalam kod ini, peralihan daripada kelegapan 0 kepada kelegapan 1 ditangguhkan selama 180 saat, memastikan imej kekal kelihatan untuk tempoh yang ketara selepas tudingan tamat.

Tambahan Pertimbangan:

• Anda boleh melaraskan nilai tunda peralihan untuk mengawal tempoh keterlihatan imej selepas melayang.
• Anda juga boleh menggunakan teknik alternatif, seperti menetapkan kelegapan kepada 0.99 dan bukannya 1 untuk mencipta kesan separa lutsinar.
• Jika anda memerlukan fungsi yang lebih kompleks, pertimbangkan untuk menggunakan JavaScript atau jQuery untuk mengendalikan perubahan keadaan tuding.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Membuat Kesan Hover CSS Berterusan Selepas Hover Tamat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!