Mengapa Kesan Hover Saya Tidak Berfungsi pada Elemen dengan `keterlihatan: tersembunyi` dalam CSS?

Keterlihatan Tidak Berfungsi dalam CSS: Inilah Sebabnya dan Cara Membetulkannya

Dalam penggayaan CSS, kekaburan kadangkala boleh membawa kepada hasil yang tidak dijangka. Mari kita terokai isu biasa yang dihadapi apabila cuba menyembunyikan teks dengan sifat 'keterlihatan'.

Masalah:

CSS anda berbunyi seperti berikut:

Menurut konfigurasi ini, menuding pada teks dengan kelas '.spoiler' sepatutnya mendedahkannya. Walau bagaimanapun, ini tidak berlaku, menjadikan teks tidak kelihatan tanpa mengira kedudukan tetikus.

Sebab:

Isunya terletak pada gelagat lalai unsur tersembunyi. Elemen dengan 'keterlihatan: tersembunyi' tidak dikenali oleh ejen pengguna semasa acara tetikus, termasuk tuding. Oleh itu, keadaan tuding tidak sekali-kali diaktifkan.

Penyelesaian 1: Elemen Bersarang

Untuk mengatasi cabaran ini, seseorang boleh meletakkan teks spoiler di dalam yang lain elemen:

CSS:

HTML:

Penyelesaian ini berfungsi kerana elemen span bersarang dengan keterlihatan tersembunyi pada mulanya menyekat acara tetikus. Walau bagaimanapun, apabila elemen induk '.spoiler' menerima acara tuding, ia mengaktifkan dan mendedahkan elemen span, menjadikan teks kelihatan.

Penyelesaian 2 (Chrome Sahaja): Trik Outline

Pendekatan alternatif untuk Chrome ialah menambah garis besar pada '.spoiler' elemen:

Teknik ini mencipta kotak hit halimunan yang bertindak balas kepada peristiwa tetikus, membenarkan kesan tuding berfungsi dengan betul pada elemen tersembunyi.

Atas ialah kandungan terperinci Mengapa Kesan Hover Saya Tidak Berfungsi pada Elemen dengan `keterlihatan: tersembunyi` dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!