Bagaimana untuk Membuat Div Tindanan \"Halimunan\" kepada Acara Tetikus?

Memastikan Responsif Elemen terhadap Peristiwa Tetikus

Dalam situasi tertentu, adalah perlu untuk menindih div lutsinar pada teks untuk mengaburkan keterlihatannya. Walau bagaimanapun, ini menimbulkan isu tindanan yang menghalang teks asas daripada boleh diklik. Adakah terdapat cara untuk menjadikan tindanan "tidak kelihatan" kepada peristiwa tetikus, membenarkan interaksi dengan teks di bawah?

Sebagai contoh, jika kita mempunyai struktur HTML berikut:

<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>

Tindanan div meliputi teks, tetapi anda inginkan keupayaan untuk mengklik pada teks melalui tindanan.

Penyelesaian: CSS pointer-events

CSS pointer-events menyediakan penyelesaian kepada cabaran ini. Sifat ini membolehkan anda mengawal cara elemen HTML bertindak balas terhadap peristiwa tetikus. Dengan menetapkan sifat acara penuding kepada tiada untuk div tindanan, anda boleh menjadikannya tidak kelihatan kepada klik dan acara tetikus lain, sambil masih membenarkan interaksi dengan elemen di bawahnya.

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

Dengan CSS ini digunakan , div tindanan akan menjadi telus kepada acara tetikus, membolehkan pengguna berinteraksi dengan teks asas tanpa halangan.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Div Tindanan \"Halimunan\" kepada Acara Tetikus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!