Cara Menggunakan Gaya Kursor Apabila Melumpuhkan Acara Tuding dengan `pointer-events: none`?

Tambahkan Harta Kursor Apabila Melumpuhkan Acara Tuding dengan peristiwa-penunjuk: tiada

Melumpuhkan acara tuding menggunakan acara-penunjuk: tiada satu pun kadangkala boleh menghalang aplikasi gaya kursor. Ini kerana peristiwa penuding: tiada satu pun berkesan menjadikan elemen tidak kelihatan kepada interaksi tetikus, termasuk menukar gaya kursor.

Untuk menyelesaikan isu ini, sifat kursor harus digunakan pada elemen induk yang mengandungi elemen dengan penunjuk -peristiwa: tiada. Ini membenarkan gaya kursor digunakan pada elemen induk sambil masih melumpuhkan acara tuding untuk elemen anak.

Contoh:

HTML:

<div class="container">
  <a href="#">Link</a>
</div>

CSS:

.container {
  cursor: pointer;
}
.container a {
  pointer-events: none;
  color: blue;
}

Dalam contoh ini, sifat kursor digunakan pada .container kelas, yang mengandungi pautan. Ini membenarkan kursor bertukar kepada penuding apabila menuding di atas bekas, walaupun pautan itu sendiri mempunyai acara penuding: tiada digunakan.

Perhatikan bahawa mungkin terdapat ketidakkonsistenan penyemak imbas semasa menggunakan pendekatan ini. Dalam IE11, sebagai contoh, elemen pseudo mungkin diperlukan untuk memastikan keserasian. Elemen pseudo ini sepatutnya mempunyai lebar dan ketinggian ditetapkan kepada 100%, dan kedudukannya ditetapkan kepada mutlak, meliputi keseluruhan kawasan elemen induk.

Atas ialah kandungan terperinci Cara Menggunakan Gaya Kursor Apabila Melumpuhkan Acara Tuding dengan `pointer-events: none`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!