CSS รายการcursor
- หน้าก่อน @counter-style
- หน้าต่อไป direction
คำนิยามและวิธีใช้
คุณสมบัติ cursor กำหนดชนิดของเครื่องหมายที่จะแสดง (รูปร่าง)
คำนิยามนี้กำหนดรูปร่างของเครื่องหมายตามหลังมุมหรือขอบขององค์ประกอบเมื่อตามหลังมุมหรือขอบขององค์ประกอบ (แต่ CSS2.1 ไม่ได้กำหนดโดยใดที่กำหนดขอบของโซนดังกล่าว)
ดูเพิ่มเติม:
CSS การเรียนรู้CSS การจัดตัว
คู่มืออ้างอิง HTML DOMคุณสมบัติ cursor
ตัวอย่าง
ตราหน้าที่ต่างกัน
span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}
CSS การใช้งานภาษา
cursor: value;
ค่าของคุณสมบัติ
| ค่า | คำอธิบาย |
|---|---|
| url |
URL ที่ต้องใช้สำหรับตราหน้าที่กำหนดเอง หมายเหตุ：กรุณากำหนดตราหน้าทั่วไปสุดท้ายในรายการนี้เสมอ เพื่อกันไม่ให้ล้มเหลวถ้าไม่มีตราหน้าที่กำหนดด้วย URL |
| default | ตราหน้าโดยมาตรา (เช่นเดียวกับฝาย) |
| auto | โดยมาตรา |
| crosshair | ตราหน้าปุ่มแสดงให้เห็นว่าเป็นเส้นตาย |
| pointer | ตราหน้าปุ่มแสดงให้เห็นว่ามีลิงก์ที่สามารถคลิกได้ (หมือนหนังมือ) |
| move | ตราหน้านี้บ่งชี้ว่าวัตถุสามารถเลื่อนได้ |
| e-resize | ตราหน้านี้บ่งชี้ว่าขอบตารางสี่เหลี่ยมของเรียกให้สามารถเลื่อนขวาได้ (ตะวันออก) |
| ne-resize | ตราหน้านี้บ่งชี้ว่าขอบตารางสี่เหลี่ยมของเรียกให้สามารถเลื่อนขึ้นและขวาได้ (ตะวันเหนือ/ตะวันออก) |
| nw-resize | ตราหน้านี้บ่งชี้ว่าขอบตารางสี่เหลี่ยมของเรียกให้สามารถเลื่อนขึ้นและซ้ายได้ (ตะวันเหนือ/ตะวันตก) |
| n-resize | ตราหน้านี้บ่งชี้ว่าขอบตารางสี่เหลี่ยมของเรียกให้สามารถเลื่อนขึ้นได้ (ตะวันเหนือ) |
| se-resize | ตราหน้านี้บ่งชี้ว่าขอบตารางสี่เหลี่ยมของเรียกให้สามารถเลื่อนลงและขวาได้ (ตะวันออก/ตะวันตก) |
| sw-resize | ตราหน้านี้บ่งชี้ว่าขอบตารางสี่เหลี่ยมของเรียกให้สามารถเลื่อนลงและซ้ายได้ (ตะวันออก/ตะวันตก) |
| s-resize | ตราหน้านี้บ่งชี้ว่าขอบตารางสี่เหลี่ยมของเรียกให้สามารถเลื่อนลงได้ (ตะวันออก) |
| w-resize | ตราหน้านี้บ่งชี้ว่าขอบตารางสี่เหลี่ยมของเรียกให้สามารถเลื่อนซ้ายได้ (ตะวันตก) |
| text | ตราหน้านี้บ่งชี้ว่าเป็นข้อความ |
| wait | ตราหน้านี้บ่งชี้ว่าโปรแกรมกำลังทำงาน |
| help | ตราหน้านี้บ่งชี้ว่ามีความช่วยเหลือที่สามารถใช้งานได้ (เช่นเดียวกับหัวข้อหรือทรงท่อน) |
รายละเอียดเทคโนโลยี
| ค่าเริ่มต้น: | auto |
|---|---|
| การสืบทอด: | yes |
| เวอร์ชัน： | CSS2 |
| การใช้งานภาษา JavaScript: | object.style.cursor="crosshair" |
ตัวอย่าง TIY
- เปลี่ยนตราหน้าปุ่ม
- ตัวอย่างนี้แสดงวิธีการเปลี่ยนตราหน้าปุ่ม
การสนับสนุนโปรแกรมนำ
ตัวเลขในตารางบ่งชี้เวอร์ชันบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 5.0 | 5.5 | 4.0 | 5.0 | 9.6 |
หมายเหตุ：Opera 9.3 และ Safari 3 ไม่สนับสนุน url ค่า。
- หน้าก่อน @counter-style
- หน้าต่อไป direction
