Mengapa Keterlihatan CSS Saya Tidak Berfungsi pada Elemen Tersembunyi Berlegar?

Keterlihatan CSS Tidak Berfungsi: Penyelesaian Masalah dan Penyelesaian

Kelas "spoiler" dalam CSS bertujuan untuk mendedahkan teks tersembunyi semasa tuding tetikus , tetapi atas sebab tertentu, teks itu kekal tidak kelihatan. Untuk menangani isu ini, kita perlu memahami sebab keterlihatan tidak berfungsi dalam konteks ini.

Isu ini timbul kerana anda tidak boleh menuding pada elemen tersembunyi. Apabila keterlihatan ditetapkan kepada tersembunyi, elemen dan kandungannya tidak dapat dilihat dengan berkesan oleh peristiwa tetikus, termasuk tuding tetikus.

Untuk menyelesaikan masalah ini, satu penyelesaian ialah meletakkan elemen tersembunyi dalam elemen bekas lain. Ini akan membolehkan bekas luar dituding ke atas, mencetuskan perubahan keterlihatan untuk elemen bersarang:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

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

Pendekatan ini memastikan elemen bersarang kekal tersembunyi sehingga tetikus melayang di bahagian luar bekas.

Selain itu, dalam Chrome, anda boleh menambah garis besar pada elemen tersembunyi untuk memudahkan interaksi dengan:

.spoiler {
    outline: 1px solid transparent;
}

Kod yang dikemas kini ini membolehkan togol keterlihatan yang lebih mudah dengan menuding atas garis besar unsur tersembunyi.

Atas ialah kandungan terperinci Mengapa Keterlihatan CSS Saya Tidak Berfungsi pada Elemen Tersembunyi Berlegar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!