Hartanah penunjuk-penunjuk dalam CSS mengawal sama ada elemen boleh menjadi sasaran peristiwa penunjuk. 1. Gunakan penunjuk-events: Tiada untuk melumpuhkan interaksi seperti klik atau hovers sambil mengekalkan elemen yang kelihatan secara visual. 2. Sapukan kepada Overlay untuk membolehkan tingkah laku klik ke unsur-unsur yang mendasari. 3. Interaksi yang boleh dianugerahkan pada kanak-kanak tertentu menggunakan peristiwa penunjuk: auto. 4. Gunakannya untuk mematikan butang buat sementara waktu tanpa mengubah penampilan mereka dengan menggabungkannya dengan kelegapan. 5. Ingat bahawa penunjuk-acara tidak menjejaskan navigasi papan kekunci, jadi menguruskan kebolehcapaian dengan atribut Tabindex atau ARIA. 6. Ia disokong secara meluas dalam pelayar moden dan sesuai untuk lapisan, alat tool, dan interaktiviti bersyarat, memberikan kawalan yang tepat terhadap interaksi tetikus tanpa mengubah susun atur.

Hartanah pointer-events dalam CSS mengawal sama ada elemen boleh menjadi sasaran peristiwa tetikus (atau penunjuk) seperti klik, hovers, atau seret. Ia berguna untuk mengawal interaktiviti tanpa menukar susun atur atau mengeluarkan unsur -unsur dari DOM.

Bila Menggunakan pointer-events

Anda mungkin mahu melumpuhkan interaksi dengan elemen sementara - sebagai contoh, untuk membiarkan klik melalui elemen yang mendasari, atau untuk mengelakkan butang kurang upaya daripada mencetuskan tindakan. Tidak seperti display: none atau visibility: hidden , pointer-events membolehkan anda menyembunyikan interaktiviti sambil mengekalkan penampilan visual utuh.

Kes penggunaan biasa:

• Buat overlay "tidak kelihatan" untuk mengklik sehingga kandungan di belakangnya tetap interaktif.
• Lumpuhkan butang atau pautan tanpa menguburkannya melalui JavaScript.
• Buat kesan hover pada elemen induk sambil mengabaikan unsur -unsur kanak -kanak.

Nilai asas pointer-events

Berikut adalah nilai yang paling biasa digunakan:

• auto - Tingkah laku lalai. Unsur ini bertindak balas terhadap peristiwa penunjuk seperti biasa.
• none - Elemen tidak bertindak balas terhadap sebarang peristiwa penunjuk. Peristiwa melewati elemen di bawahnya.
• Nilai -nilai lain wujud (seperti stroke , fill , dll.), Tetapi kebanyakannya digunakan dalam SVG.

Contoh: overlay klik

 .Overlay {
  Kedudukan: Tetap;
  Atas: 0;
  Kiri: 0;
  Lebar: 100%;
  Ketinggian: 100%;
  Latar Belakang: RGBA (0, 0, 0, 0.5);
  Pointer-events: Tiada; / * membolehkan klik untuk melalui */
}

.
  Pointer-events: Auto; / * Interaksi yang boleh dianugerahkan hanya untuk butang */
}

Dalam kes ini, keseluruhan lapisan mengabaikan klik, tetapi butang di dalamnya tetap boleh diklik.

Petua praktikal

• Gunakan pointer-events: none yang mensimulasikan "hover" pada elemen latar belakang
  Anda boleh meletakkan elemen telus di atas seksyen dan melumpuhkan peristiwa penunjuknya, membiarkan keadaan hover berfungsi pada bekas di bawah.

• Butang Lumpuhkan sementara
  Daripada melumpuhkan butang dalam HTML (atribut disabled ), yang mengubah penampilannya, anda boleh menggunakan:

   .btn-disabled {
    Pointer-events: Tiada;
    Kelegapan: 0.6;
  }

  Ini menjadikan gaya klik konsisten dan blok.

• Berhati -hati dengan kebolehcapaian
  Melumpuhkan peristiwa penunjuk tidak mengeluarkan elemen dari urutan tab. Jika anda menyekat klik, juga pertimbangkan navigasi papan kekunci (misalnya, menggunakan tabindex="-1" atau atribut ARIA jika diperlukan).

• Berfungsi di semua pelayar moden
  Sokongan sangat baik, termasuk mudah alih. Cukup elakkan bergantung pada persekitaran yang sangat lama.

---

Ringkasan

pointer-events: none cara yang ringan untuk melumpuhkan interaksi pada elemen sambil meninggalkannya secara visual. Sepasangnya dengan auto pada kanak -kanak bersarang apabila diperlukan, dan ingat untuk mengendalikan kebolehcapaian secara berasingan. Ia amat berguna untuk lapisan, alat tool, dan interaktiviti bersyarat. Pada asasnya, ia memberi anda kawalan yang baik terhadap apa yang bertindak balas terhadap tetikus - tanpa bergerak apa -apa.

Atas ialah kandungan terperinci Cara Menggunakan Harta Penunjuk-Titik di CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!