Bagaimanakah Saya Boleh Mengekalkan Keadaan Hover CSS Selepas Tetikus Meninggalkan Elemen?

Kekalkan Keadaan Tuding CSS Selepas "Nyahlegar"

Dalam reka bentuk web, keadaan tuding biasanya digunakan untuk memaparkan kandungan tambahan pada tuding tetikus. Walau bagaimanapun, secara lalai, kandungan ini hilang apabila kursor tetikus meninggalkan kawasan yang ditentukan. Artikel ini membentangkan penyelesaian CSS untuk memastikan keadaan tuding kelihatan selepas "menyahlegar" kursor.

Contoh yang disediakan menggunakan kelas pseudo ':hover' untuk mendedahkan imej apabila menuding di atas div. Walau bagaimanapun, imej hilang apabila acara tuding tamat. Untuk menangani perkara ini, teknik CSS berikut boleh digunakan:

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

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

div {
    line-height: 1.2em;
    font-size: 1em;
    color: black;
    transition: 0s 180s;
}

div:hover {
    line-height: 0;
    font-size: 0;
    color: transparent;
    transition: 0;
}

Kod ini menggunakan gabungan kedudukan mutlak, kelegapan dan peralihan untuk mencapai kesan yang diingini. Kelegapan pada mulanya ditetapkan kepada 0, menjadikan imej tidak kelihatan. Semasa tuding, kelegapan ditetapkan kepada 1, mendedahkan imej. Untuk mengelakkan kandungan daripada hilang semasa "nyahlekap", sifat peralihan digunakan dengan kelewatan selama 180 saat (3 minit). Kelewatan ini secara berkesan menghalang peralihan kelegapan, memastikan imej kelihatan selama-lamanya.

Sebagai alternatif, anda juga boleh menggunakan acara fokus untuk memastikan imej kekal kelihatan apabila diklik:

div:hover img:focus {
   opacity: 0;
   transition: 3s;
   -webkit-transform: rotate(-360deg) scale(0.23);
   -webkit-transform: rotate(-360deg) scale(0.23);
   -moz-transform: rotate(-360deg) scale(0.23);
   -o-transform: rotate(-360deg) scale(0.23);
   -ms-transform: rotate(-360deg) scale(0.23);
   transform: rotate(-360deg) scale(0.23);
}

Ini varian menggunakan peristiwa fokus dan peralihan untuk memudar dan memutar imej selepas ia diklik, memastikan ia kelihatan semasa peralihan.

Dengan melaksanakan teknik CSS ini, anda boleh mengubah suai gelagat keadaan tuding untuk mengekalkan keterlihatan kandungan yang diingini walaupun selepas kursor tetikus meninggalkan kawasan yang ditentukan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Keadaan Hover CSS Selepas Tetikus Meninggalkan Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!