ในบทความนี้ เราจะอธิบายอย่างละเอียดเกี่ยวกับวิธีใช้คุณสมบัติ CSS pointer-events
คุณสมบัติ pointer-events คืออะไร?
ซีเอสเอส “ ตัวชี้เหตุการณ์ คุณสมบัติ ระบุพฤติกรรมของตัวชี้/การแตะที่มีต่อองค์ประกอบ HTML และองค์ประกอบที่เลือกจะตอบสนองด้วยการดำเนินการต่างๆ เช่น โฮเวอร์หรือคลิก
วิธีการใช้คุณสมบัติตัวชี้เหตุการณ์?
ใน CSS สามารถใช้คุณสมบัติ pointer-events เพื่อเปิดใช้งานหรือปิดใช้งานการดำเนินการของตัวชี้บนองค์ประกอบ HTML บางอย่างได้ ไวยากรณ์ของคุณสมบัติ pointer-events แสดงไว้ด้านล่าง
ไวยากรณ์
ตัวชี้เหตุการณ์ : ไม่มี | รถยนต์ ;
ในไวยากรณ์ดังกล่าว “ รถยนต์ ” เป็นค่าเริ่มต้นของคุณสมบัติ pointer-events และเปิดใช้งานการดำเนินการของตัวชี้ไปยังองค์ประกอบ และ “ ไม่มี ” ตรงกันข้ามกับรถยนต์โดยสิ้นเชิง มันปิดการทำงานของตัวชี้บนองค์ประกอบ HTML
ไปข้างหน้าและยกตัวอย่างเพื่อทำความเข้าใจคุณสมบัติตัวชี้เหตุการณ์
ตัวอย่าง 1
ในไฟล์ HTML ของเรา ระบุแท็กสมอด้วยข้อความ “ LinuxHint.io ” และวางไว้ในส่วนลำตัว
HTML
< เอ href = “https://www.linuxhint.io/” > LinuxHint.io < / เอ >ตอนนี้เราจะใช้ “ ตัวชี้เหตุการณ์ ” คุณสมบัติและกำหนดมูลค่า “ ไม่มี ” การดำเนินการนี้จะปิดใช้งานการดำเนินการตัวชี้บนองค์ประกอบ
CSS
เอ {ตัวชี้เหตุการณ์ : ไม่มี ;
}
บันทึกไฟล์ HTML ของคุณด้วยรหัสที่กล่าวถึงและเรียกใช้โดยใช้เบราว์เซอร์ของคุณ:
มาดูตัวอย่างอื่นเพื่อครอบคลุมคุณสมบัติตัวชี้เหตุการณ์อย่างลึกซึ้ง
ตัวอย่าง 2
ตั้งค่าคุณสมบัติตัวชี้เหตุการณ์เป็น “ รถยนต์ ' เวลานี้. มันจะทำให้องค์ประกอบตอบสนองเหนือตัวชี้หรือคลิก อย่างไรก็ตาม auto เป็นค่าเริ่มต้นของคุณสมบัติ pointer-events
CSS
เอ {ตัวชี้เหตุการณ์ : รถยนต์ ;
}
เอาท์พุต
เราได้ครอบคลุมการใช้งานคุณสมบัติตัวชี้เหตุการณ์ CSS ที่แตกต่างกัน
บทสรุป
เพื่อควบคุมการทำงานของตัวชี้ เราสามารถใช้ CSS “ ตัวชี้เหตุการณ์ ' คุณสมบัติ. “ รถยนต์ ค่า ” คือค่าที่กำหนดไว้ล่วงหน้าของคุณสมบัตินี้ มันเปิดใช้งานการกระทำเหนือองค์ประกอบ HTML เมื่อใช้คุณสมบัติ pointer-events กับค่า “ ไม่มี ” มันปิดการใช้งานการกระทำต่อองค์ประกอบเฉพาะ บทความนี้ได้สาธิตวิธีใช้คุณสมบัติตัวชี้เหตุการณ์ CSS