ด้วยคุณสมบัติเคอร์เซอร์ CSS คุณสามารถแสดงเครื่องหมายกากบาทหรือเครื่องหมายบวก ตัวชี้ ฯลฯ คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้คุณสมบัติเคอร์เซอร์ใน CSS -
ตัวอย่าง
<html> <head> </head> <body> <div style = "cursor:auto">Auto</div> <div style = "cursor:crosshair">Crosshair</div> <div style = "cursor:default">Default</div> <div style = "cursor:pointer">Pointer</div> <div style = "cursor:move">Move</div> <div style = "cursor:e-resize">e-resize</div> <div style = "cursor:ne-resize">ne-resize</div> <div style = "cursor:nw-resize">nw-resize</div> <div style = "cursor:n-resize">n-resize</div> <div style = "cursor:se-resize">se-resize</div> <div style = "cursor:sw-resize">sw-resize</div> <div style = "cursor:s-resize">s-resize</div> <div style = "cursor:w-resize">w-resize</div> <div style = "cursor:text">text</div> <div style = "cursor:wait">wait</div> <div style = "cursor:help">help</div> </body> </html>
เราได้เพิ่มค่าด้านล่างด้านบน −
| ค่า | คำอธิบาย |
|---|---|
| อัตโนมัติ | รูปร่างของเคอร์เซอร์ขึ้นอยู่กับบริบทที่สิ้นสุด ตัวอย่างเช่น 'ฉัน' เหนือข้อความ 'ส่ง' ลิงก์ เป็นต้น |
| เป้าเล็ง | เป้าหรือเครื่องหมายบวก |
| ค่าเริ่มต้น | ลูกศร |
| ตัวชี้ | มือชี้ (ใน IE 4 ค่านี้คือมือ) |
| ย้าย | แถบ 'ฉัน' |
| e-resize | เคอร์เซอร์ระบุว่าจะย้ายขอบของกล่องไปทางขวา (ตะวันออก) |
| ne-resize | เคอร์เซอร์ระบุว่าขอบของกล่องจะถูกเลื่อนขึ้นและไปทางขวา (เหนือ/ตะวันออก) |
| nw-resize | เคอร์เซอร์ระบุว่าจะย้ายขอบของกล่องขึ้นและไปทางซ้าย (เหนือ/ตะวันตก) |
| n-resize | เคอร์เซอร์ระบุว่าจะย้ายขอบของกล่องขึ้น (ทิศเหนือ) |
| se-resize | เคอร์เซอร์ระบุว่าจะย้ายขอบของกล่องลงและไปทางขวา (ใต้/ตะวันออก) |
| sw-resize | เคอร์เซอร์ระบุว่าจะย้ายขอบของกล่องลงและไปทางซ้าย (ใต้/ตะวันตก) |
| s-resize | เคอร์เซอร์ระบุว่าขอบของกล่องจะถูกเลื่อนลง (ทางใต้) |
| w-resize | เคอร์เซอร์ระบุว่าจะย้ายขอบของกล่องไปทางซ้าย (ตะวันตก) |
| text | แถบ I |
| รอ | แก้วชั่วโมง |
| help | เครื่องหมายคำถามหรือบอลลูน เหมาะสำหรับใช้แทนปุ่มช่วยเหลือ |
| ที่มาของไฟล์รูปภาพเคอร์เซอร์ |
