Dalam penulisan ini, kami akan menguraikan cara menggunakan properti pointer-event CSS.
Apa itu Properti pointer-event?
CSS “ pointer-acara ” properti menentukan perilaku penunjuk/ketuk terhadap elemen HTML dan apakah elemen yang dipilih akan merespons dengan melakukan tindakan seperti mengarahkan kursor atau mengklik.
Bagaimana Cara Menggunakan Properti pointer-event?
Dalam CSS, properti pointer-events dapat digunakan untuk mengaktifkan atau menonaktifkan tindakan pointer pada beberapa elemen HTML tertentu. Sintaks properti pointer-events diberikan di bawah ini.
Sintaksis
pointer-acara : tidak ada | mobil ;
Dalam sintaks yang disebutkan, “ mobil ” adalah nilai default dari properti pointer-events, dan ini memungkinkan aksi pointer menuju suatu elemen, dan “ tidak ada ” benar-benar berlawanan dengan auto; itu menonaktifkan tindakan pointer pada elemen HTML.
Mari kita lanjutkan dan ambil contoh untuk memahami properti pointer-events.
Contoh 1
Dalam file HTML kami, tentukan tag jangkar dengan teks “ LinuxHint.io ” dan letakkan di dalam bagian tubuh.
HTML
< sebuah href = “https://www.linuxhint.io/” > LinuxHint.io < / sebuah >Sekarang, kita akan menggunakan ' pointer-acara ” properti dan tetapkan nilainya “ tidak ada ”. Ini akan menonaktifkan tindakan penunjuk pada elemen.
CSS
sebuah {pointer-acara : tidak ada ;
}
Simpan file HTML Anda dengan kode yang disebutkan dan jalankan menggunakan browser Anda:
Mari kita ambil contoh lain untuk membahas properti pointer-event secara mendalam.
Contoh 2
Setel nilai properti pointer-events ke “ mobil ' kali ini. Ini akan membuat elemen merespons dengan mengarahkan kursor atau klik. Meskipun demikian, auto adalah nilai default dari properti pointer-events.
CSS
sebuah {pointer-acara : mobil ;
}
Keluaran
Kami telah membahas penggunaan yang berbeda dari properti pointer-event CSS.
Kesimpulan
Untuk mengontrol tindakan pointer, kita dapat menggunakan CSS “ pointer-acara ' Properti. ' mobil ” nilai adalah nilai yang telah ditentukan sebelumnya dari properti ini; itu memungkinkan tindakan atas elemen HTML. Ketika properti pointer-events digunakan dengan nilai “ tidak ada ”, ini menonaktifkan tindakan terhadap elemen tertentu. Artikel ini telah menunjukkan cara menggunakan properti CSS pointer-events.