เราสามารถจัดการรูปภาพเคอร์เซอร์สำหรับองค์ประกอบต่างๆ ในเอกสาร HTML โดยใช้คุณสมบัติ cursor ใน CSS
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ CSS cursor ดังนี้: Selector { cursor: /*value*/ }
ค่าต่อไปนี้สำหรับคุณสมบัติ CSS cursor:
| ลำดับ | ค่าและคำอธิบาย |
|---|---|
| 1 | alias บ่งบอกว่าจะสร้างนามแฝงของสิ่งใดสิ่งหนึ่ง |
| 2 | all-scroll บ่งบอกว่าสิ่งใดสิ่งหนึ่งสามารถเลื่อนได้ในทุกทิศทาง |
| 3 | auto เป็นค่าเริ่มต้น และเบราว์เซอร์ตั้งค่าเคอร์เซอร์ |
| 4 | cell บ่งบอกว่าเซลล์ (หรือชุดของเซลล์) อาจถูกเลือก |
| 5 | context-menu บ่งบอกว่าเมนูบริบทพร้อมใช้งาน |
| 6 | col-resize บ่งบอกว่าคอลัมน์สามารถปรับขนาดแนวนอนได้ |
| 7 | copy บ่งบอกว่าสิ่งใดสิ่งหนึ่งจะถูกคัดลอก |
| 8 | crosshair แสดงเป็นเครื่องหมายไขว้ |
| 9 | default แสดงเคอร์เซอร์เริ่มต้น |
| 10 | e-resize บ่งบอกว่าเส้นขอบของกล่องจะถูกเลื่อนไปทางขวา (ตะวันออก) |
| 11 | ew-resize บ่งบอกว่าเคอร์เซอร์ปรับขนาดสองทิศทาง |
| 12 | grab บ่งบอกว่าสิ่งใดสิ่งหนึ่งสามารถจับได้ |
| 13 | grabbing บ่งบอกว่าสิ่งใดสิ่งหนึ่งกำลังถูกจับ |
| 14 | help บ่งบอกว่ามีความช่วยเหลือ |
| 15 | move บ่งบอกว่าสิ่งใดสิ่งหนึ่งจะถูกย้าย |
| 16 | n-resize บ่งบอกว่าเส้นขอบของกล่องจะถูกเลื่อนขึ้น (เหนือ) |
| 17 | ne-resize บ่งบอกว่าเส้นขอบของกล่องจะถูกเลื่อนขึ้นและขวา (ตะวันออกเฉียงเหนือ) |
| 18 | nesw-resize บ่งบอกว่าเคอร์เซอร์ปรับขนาดสองทิศทาง |
| 19 | ns-resize บ่งบอกว่าเคอร์เซอร์ปรับขนาดสองทิศทาง |
| 20 | nw-resize บ่งบอกว่าเส้นขอบของกล่องจะถูกเลื่อนขึ้นและซ้าย (ตะวันตกเฉียงเหนือ) |
| 21 | nwse-resize บ่งบอกว่าเคอร์เซอร์ปรับขนาดสองทิศทาง |
| 22 | no-drop บ่งบอกว่าสิ่งที่ลากไม่สามารถวางที่นี่ได้ |
| 23 | none ไม่แสดงเคอร์เซอร์สำหรับองค์ประกอบ |
| 24 | not-allowed บ่งบอกว่าการกระทำที่ร้องขอจะไม่ถูกดำเนินการ |
| 25 | pointer เป็นตัวชี้และบ่งบอกลิงก์ |
| 26 | progress บ่งบอกว่าโปรแกรมกำลังทำงาน (กำลังดำเนินการ) |
| 27 | row-resize บ่งบอกว่าแถวสามารถปรับขนาดแนวตั้งได้ |
| 28 | s-resize บ่งบอกว่าเส้นขอบของกล่องจะถูกเลื่อนลง (ใต้) |
| 29 | se-resize บ่งบอกว่าเส้นขอบของกล่องจะถูกเลื่อนลงและขวา (ตะวันออกเฉียงใต้) |
| 30 | sw-resize บ่งบอกว่าเส้นขอบของกล่องจะถูกเลื่อนลงและซ้าย (ตะวันตกเฉียงใต้) |
| 31 | text บ่งบอกว่าข้อความอาจถูกเลือก |
| 32 | URL รายการ URL แบบคั่นด้วยจุลภาคสำหรับเคอร์เซอร์ที่กำหนดเองพร้อมเคอร์เซอร์ทั่วไปท้ายสุดเป็นการสำรอง |
| 33 | vertical-text บ่งบอกว่าข้อความแนวตั้งอาจถูกเลือก |
| 34 | w-resize บ่งบอกว่าเส้นขอบของกล่องจะถูกเลื่อนซ้าย (ตะวันตก) |
| 35 | wait บ่งบอกว่าโปรแกรมกำลังทำงาน |
| 36 | zoom-in บ่งบอกว่าสิ่งใดสิ่งหนึ่งสามารถซูมเข้าได้ |
| 37 | zoom-out บ่งบอกว่าสิ่งใดสิ่งหนึ่งสามารถซูมออกได้ |
| 38 | initial ตั้งค่าคุณสมบัติ cursor เป็นค่าเริ่มต้น |
| 39 | inherit สืบทอดคุณสมบัติ cursor จากองค์ประกอบพาเรนต์ |
ตัวอย่างต่อไปนี้เป็นการนำคุณสมบัติ CSS cursor ไปใช้:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> div { margin: 5px; float: left; } #one { background-color: beige; } #two { background-color: lavender; } .n-resize {cursor: n-resize;} .ne-resize {cursor: ne-resize;} .nw-resize {cursor: nw-resize;} .not-allowed {cursor: not-allowed;} .pointer {cursor: pointer;} </style></head> <body> <div id="one"> <div class="nw-resize">left corner</div><div class="n-resize">up</div> <div class="ne-resize">right corner</div> </div> <div id="two"> <div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div> </div> </body> </html>
ผลลัพธ์
