Bagaimana untuk Mengekalkan Gaya Kursor Semasa Melumpuhkan Interaktiviti Pautan dengan 'pointer-events: none'?

Kekalkan Gaya Kursor dengan "pointer-events: none"

Melumpuhkan interaktiviti pautan menggunakan "pointer-events: none" boleh bercanggah dengan perubahan sifat kursor. Ini kerana "peristiwa penunjuk: tiada" menghalang semua interaksi tetikus dengan elemen, termasuk perubahan kursor.

Untuk menangani isu ini, anda boleh menggunakan sifat kursor pada elemen induk dan bukannya pautan itu sendiri. Dengan cara ini, perubahan kursor akan berkuat kuasa sambil mengekalkan interaktiviti pautan yang dilumpuhkan.

Contoh:

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

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

Walau bagaimanapun, wujud ketidakkonsistenan penyemak imbas tertentu . Untuk memastikan keserasian dengan IE11, anda mungkin perlu menambah elemen pseudo:

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

Elemen pseudo ini mendayakan pemilihan teks dalam Firefox dan membenarkan kursor bertukar dalam Chrome tanpa menjejaskan kelumpuhan interaktiviti.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Gaya Kursor Semasa Melumpuhkan Interaktiviti Pautan dengan 'pointer-events: none'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!