Bagaimanakah Saya Boleh Mencipta Teks Boleh Diklik Di Bawah Tindanan Tanpa Menyekat Acara Tetikus?

Mengatasi Gangguan Klik dengan Div "Ghaib"

Untuk meningkatkan kebolehgunaan halaman web, selalunya wajar untuk menindih elemen di atas teks, tetapi tanpa menghalang fungsi klik pada kandungan asas. Kekacauan ini timbul apabila div tindanan menghalang peristiwa tetikus daripada mencapai elemen boleh klik di bawahnya.

Jangan takut, CSS menawarkan penyelesaian melalui sifat acara penunjuk. Disokong oleh penyemak imbas moden seperti Firefox 3.6 , Chrome 2 , IE 11 dan Safari 4 , sifat ini membolehkan anda mengkonfigurasi gelagat peristiwa tetikus pada elemen tertentu.

Untuk menjadikan div tindanan "tidak kelihatan" kepada klik , hanya gunakan peraturan CSS berikut:

<code class="css">#overlay {
  pointer-events: none;
}</code>

Kod ini secara berkesan memberitahu penyemak imbas untuk mengabaikan peristiwa tetikus yang dimulakan dari dalam div #overlay. Akibatnya, teks asas kekal boleh diakses untuk klik, pemilihan dan interaksi tetikus lain.

Berikut ialah coretan kod yang disemak yang menunjukkan teknik ini:

<code class="html"><div id="container">
    <p>Some text</p>
    <div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height:100%">
        ... some content ...
    </div>
 </div></code>

<code class="css">#overlay {
  pointer-events: none;
}</code>

Dengan memanfaatkan penuding- acara, anda boleh membuat div tindanan yang mempertingkatkan halaman web dengan lancar tanpa mengganggu interaksi yang dimaksudkan oleh pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Teks Boleh Diklik Di Bawah Tindanan Tanpa Menyekat Acara Tetikus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!