Bagaimana untuk Mengatasi 'pointer-events: none' dengan Harta 'kursor' CSS?

Mengatasi "pointer-events: none" dengan CSS "cursor" Property

Apabila cuba melumpuhkan pautan dan menggunakan gaya kursor tersuai, anda mungkin menghadapi masalah di mana sifat kursor kekal tidak terjejas. Ini berlaku disebabkan oleh penggunaan "pointer-events: none," yang melumpuhkan semua interaksi tetikus dengan elemen.

Untuk mengatasi gelagat ini dan menukar sifat kursor, anda boleh menggunakan perubahan pada elemen induk bagi pautan itu. Berikut ialah contoh:

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>

Teknik ini berkesan dalam kebanyakan penyemak imbas. Walau bagaimanapun, mungkin terdapat ketidakkonsistenan dalam versi lama Internet Explorer (IE11). Untuk memastikan keserasian merentas penyemak imbas, anda boleh menambah elemen pseudo pada elemen induk:

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

Dengan pengubahsuaian ini, anda boleh berjaya melumpuhkan pautan sambil mengekalkan penggayaan kursor yang anda inginkan.

Atas ialah kandungan terperinci Bagaimana untuk Mengatasi 'pointer-events: none' dengan Harta 'kursor' CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!