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

DDD
Lepaskan: 2024-11-12 06:40:02
asal
516 orang telah melayarinya

Why Can't I Hover Over a Hidden Element: A CSS Visibility Conundrum?

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;
}
Salin selepas log masuk
Spoiler: <span class="spoiler"><span>E.T. phones home.</span></span>
Salin selepas log masuk

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;
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan