Mengapa CSS `keterlihatan: tersembunyi` Gagal untuk Kesan Hover?

Menyingkap Misteri: Mengapa Keterlihatan CSS Gagal untuk Tuding

Keterlihatan CSS menawarkan cara yang mudah untuk memanipulasi keterlihatan elemen, tetapi kadangkala ia tersandung pada sekatan jalan yang tidak dijangka. Pertimbangkan senario di mana anda telah menentukan kelas "spoiler" untuk menjadikan teks tidak kelihatan pada mulanya dan mendedahkannya pada tuding tetikus. Walaupun anda menjangkakan, teks itu tetap berdegil dalam keadaan tersembunyi, menentang usaha melayang anda.

Menyelami Sebabnya

Pelaku di sebalik tingkah laku yang membingungkan ini terletak pada sifat daripada unsur tersembunyi. Apabila elemen disembunyikan menggunakan visibility:hidden, ia menjadi tidak kelihatan dan tidak menggunakan ruang dalam reka letak halaman. Ini bermakna cubaan untuk melayang di atasnya pada asasnya seperti cuba berinteraksi dengan kekosongan. Elemen itu hanya tidak mendaftarkan tindakan melayang.

Menyelesaikan Dilema Keterlihatan

Untuk mengatasi halangan ini, anda perlu menyediakan elemen itu dengan cara untuk kekal kelihatan walaupun kandungannya disembunyikan. Satu pendekatan ialah menyarangkan elemen di dalam bekas lain yang boleh menerima acara tuding. Begini cara anda boleh mencapai ini:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: <span class="spoiler"><span>E.T. phones home.</span></span>

Penjelasan:

Dengan menyarangkan teks tersembunyi dalam elemen span, anda memastikan elemen spoiler luar kekal kelihatan, membolehkannya menangkap acara tuding. Apabila tuding berlaku, elemen span dalam menjadi kelihatan, mendedahkan teks spoiler.

Pertimbangan Tambahan

Dalam penyemak imbas tertentu seperti Chrome, anda mungkin menghadapi sedikit isu di mana elemen spoiler tersembunyi masih boleh dipilih sedikit dengan tetikus. Untuk menangani perkara ini, anda boleh menambah garis besar pada elemen spoiler:

.spoiler {
    outline: 1px solid transparent;
}

Garis lutsinar ini memastikan elemen spoiler mempunyai saiz yang mencukupi untuk menerima acara tuding tanpa menghalang keterlihatan keseluruhan teks.

Dengan pelarasan ini, kelas spoiler anda akan berfungsi dengan sempurna, mengekalkan halimunan teks tersembunyi dan memberikan pengalaman melayang yang lancar.

Atas ialah kandungan terperinci Mengapa CSS `keterlihatan: tersembunyi` Gagal untuk Kesan Hover?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!