Bagaimana untuk Menggayakan Kursor sebagai 'Teks' Semasa Melumpuhkan Klik Tetikus pada Elemen?

Penggayaan Kursor dengan Interaksi Tetikus Dilumpuhkan

Apabila cuba menggunakan kedua-dua sifat CSS "pointer-events: none" dan "cursor: text" , pengguna mungkin menghadapi isu kursor tidak menukar penampilannya walaupun telah dilumpuhkan. Ini berlaku kerana "peristiwa penunjuk: tiada" melumpuhkan semua interaksi tetikus dengan elemen.

Untuk menyelesaikan masalah ini, bukannya menggunakan sifat kursor terus pada pautan yang terjejas, ia harus digunakan pada elemen induk. Ini boleh dilakukan dengan membalut pautan dengan elemen bekas dan menggunakan gaya kursor pada bekas.

Contoh Kod:

HTML:

<code class="html"><span class="wrapper">
    <a href="#">Some Link</a>
</span></code>

CSS:

<code class="css">.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}</code>

Pertimbangan Tambahan:

• Dalam IE11, unsur pseudo mungkin diperlukan:

<code class="css">.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}</code>

• Dalam Firefox, kursor tidak boleh digunakan terus pada teks di dalam pautan. Sebaliknya, pendekatan elemen pseudo harus digunakan untuk menjadikan teks boleh dipilih semasa masih menggunakan gaya kursor pada bekas.

Dengan melaksanakan pendekatan ini, sifat kursor boleh berjaya diubah suai sambil menghalang interaksi tetikus dengan elemen yang ditentukan.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Kursor sebagai 'Teks' Semasa Melumpuhkan Klik Tetikus pada Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!