Bagaimana untuk Melumpuhkan Interaksi Pautan dan Menggunakan Gaya Kursor Tersuai dengan "pointer-events: none"?

Lumpuhkan Pautan dan Kursor Gaya dengan "peristiwa penunjuk: tiada"

Apabila cuba melumpuhkan pautan dan menggunakan gaya kursor tersuai, sifat CSS "kursor: teks" mungkin tidak berkuat kuasa. Ini kerana "peristiwa penunjuk: tiada" melumpuhkan semua interaksi tetikus dengan elemen, menghalang pengubahsuaian kursor.

Untuk menyelesaikan isu ini, dan bukannya menggunakan sifat kursor pada pautan dilumpuhkan, gunakannya pada elemen induk . Dengan membungkus pautan dalam elemen tambahan, seperti span, anda boleh menentukan sifat kursor dalam CSS elemen induk.

Contoh

HTML:

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

CSS:

<code class="css">.wrapper {
    position: relative;
    cursor: text;  /* Custom cursor property */
}
.wrapper a {
    pointer-events: none;  /* Disable mouse interactions */
}</code>

Perhatikan bahawa ketidakkonsistenan penyemak imbas tertentu mungkin wujud. Untuk keserasian IE11, elemen pseudo mungkin diperlukan. Selain itu, elemen pseudo mendayakan pemilihan teks dalam Firefox, manakala Chrome membenarkan pemilihan teks tanpanya.

Contoh Kemas Kini (Keserasian IE11):

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

Atas ialah kandungan terperinci Bagaimana untuk Melumpuhkan Interaksi Pautan dan Menggunakan Gaya Kursor Tersuai dengan "pointer-events: none"?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!