Mengapa Saya Tidak Boleh Tuding Pada Elemen Tersembunyi: Teka-teki Keterlihatan CSS?

Menyelesaikan Masalah Elemen Tersembunyi: Dilema Keterlihatan CSS

Dalam usaha untuk kehebatan menyembunyikan spoiler, anda telah melaksanakan pemanfaatan kelas "spoiler" sifat keterlihatan CSS. Walau bagaimanapun, usaha anda telah menemui halangan yang tidak dijangka: perosak kekal tersembunyi apabila melayang. Mari kita mendalami isu ini dan cari penyelesaian.

Cabaran dengan Halimunan Berlegar

Sifat keterlihatan CSS, seperti yang anda maksudkan, menjadikan elemen itu tersembunyi. Walau bagaimanapun, kaveat penting muncul: apabila elemen disembunyikan, ia memasuki keadaan di mana ia tidak boleh menerima sebarang input, termasuk acara tuding. Ini menimbulkan dilema, kerana melayang di atas elemen tersembunyi adalah pencetus untuk mendedahkan spoiler.

Penyelesaian Kreatif: Elemen Bersarang

Untuk mengatasi halangan ini, kami akan menggunakan teknik bersarang yang bijak. Dengan meletakkan teks spoiler di dalam elemen, kami boleh menyasarkan dan menogol keterlihatannya secara terpilih sambil mengekalkan interaksi tuding pada bekas luar.

Struktur CSS dan HTML yang dikemas kini

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

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

Demo dan Penambahbaikan Khusus Chrome

Lihat demonstrasi langsung di sini: http://jsfiddle.net/DBXuv/. Anda akan dapati teks spoiler kini muncul semasa menuding.

Untuk pengguna Chrome, peraturan CSS tambahan boleh meningkatkan kebolehaksesan:

.spoiler {
    outline: 1px solid transparent;
}

Garis ini menambah petunjuk visual yang halus bagi elemen tersembunyi kehadiran, memudahkan pengguna menemui kandungan spoiler.

Demo dikemas kini dengan peningkatan Chrome: http://jsfiddle.net/DBXuv/148/.

Atas ialah kandungan terperinci Mengapa Saya Tidak Boleh Tuding Pada Elemen Tersembunyi: Teka-teki Keterlihatan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!