Mengapa Teks Spoiler Saya Tidak Dipaparkan pada Hover?

Menyelesaikan masalah Isu Keterlihatan CSS untuk Elemen Spoiler

Apabila menggunakan sifat keterlihatan dalam CSS untuk mencipta elemen spoiler, sesetengah pengguna mungkin menghadapi masalah dengan teks kekal tidak kelihatan walaupun semasa melayang di atasnya. Isu ini boleh berpunca daripada fakta bahawa melayang memerlukan elemen yang boleh dilihat untuk berinteraksi.

Untuk menyelesaikan isu ini, satu penyelesaian yang berkesan ialah meletakkan elemen spoiler dalam bekas lain. Ini membolehkan bekas menerima acara tuding, walaupun pada mulanya elemen spoiler disembunyikan. Coretan kod yang dikemas kini berikut menunjukkan teknik ini:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: <span>

Ini pendekatan memastikan bahawa elemen kontena menjadi kelihatan apabila dilegar, mencetuskan keterlihatan elemen spoiler dalam.

Demo:
http://jsfiddle.net/DBXuv/

Nota: Untuk penyemak imbas Chrome khususnya, penambahan berikut boleh meningkatkan kefungsian:

.spoiler {
    outline: 1px solid transparent;
}

Tambahan ini memberikan isyarat visual untuk menunjukkan kehadiran spoiler, walaupun semasa teks awal disembunyikan.

Demo Kemas Kini:
http://jsfiddle.net/DBXuv/148/

Atas ialah kandungan terperinci Mengapa Teks Spoiler Saya Tidak Dipaparkan pada Hover?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!