|
auto
cursor: auto;
|
 |
 |
|
เบราว์เซอร์กำหนดเคอร์เซอร์ตามบริบทโดยอัตโนมัติ |
|
default
cursor: default;
|
 |
 |
|
แสดงลูกศรมาตรฐาน |
|
none
cursor: none
|
|
|
|
ไม่แสดงเคอร์เซอร์ |
|
|
 |
 |
|
สามารถใช้เมนูตามบริบทได้ |
|
help
cursor: help
|
 |
 |
|
รายการช่วยเหลือ |
|
pointer
cursor: pointer
|
 |
 |
|
เมื่อชี้เมาส์ไปที่ลิงก์ ฯลฯ |
|
progress
cursor: progress
|
 |
 |
|
กำลังดำเนินการงาน ผู้ใช้สามารถโต้ตอบได้ |
|
wait
cursor: wait
|
 |
 |
|
กำลังดำเนินการงาน ผู้ใช้ไม่สามารถโต้ตอบได้ |
|
cell
cursor: cell
|
 |
 |
|
เซลล์ของตารางที่เลือกได้ |
|
crosshair
cursor: crosshair
|
 |
 |
|
เคอร์เซอร์รูปกากบาท มักใช้เพื่อระบุการเลือกบนบิตแมป |
|
text
cursor: text
|
 |
 |
|
ข้อความที่เลือกได้ |
|
vertical-text
cursor: vertical-text
|
 |
 |
|
ข้อความแนวตั้งที่เลือกได้ |
|
alias
cursor: alias
|
 |
 |
|
สามารถสร้างทางลัดหรืออัลเลียสได้ |
|
copy
cursor: copy
|
 |
 |
|
สามารถคัดลอกได้ |
|
move
cursor: move
|
 |
 |
|
สามารถย้ายได้ |
|
no-drop
cursor: no-drop
|
 |
 |
|
ไม่สามารถวางที่ตำแหน่งนี้ได้ |
|
not-allowed
cursor: not-allowed
|
 |
 |
|
ไม่สามารถดำเนินการตามที่ร้องขอได้ |
|
grab
cursor: grab
|
 |
 |
|
ลากได้ โดยปกติใช้คู่กับ **grabbing** |
|
grabbing
cursor: grabbing
|
 |
 |
|
ขณะลาก ใช้คู่กับ **grab** |
|
all-scroll
cursor: all-scroll
|
 |
 |
|
สามารถเลื่อนในทุกทิศทาง |
|
col-resize
cursor: col-resize
|
 |
 |
|
กล่องปรับขนาดที่สามารถเลื่อนขอบในแนวนอนได้ |
|
row-resize
cursor: row-resize
|
 |
 |
|
กล่องปรับขนาดที่สามารถเลื่อนขอบในแนวตั้งได้ |
|
n-resize
cursor: n-resize
|
 |
 |
|
กล่องปรับขนาดที่สามารถเลื่อนขอบไปทาง **เหนือ (บน)** |
|
w-resize
cursor: w-resize
|
 |
 |
|
กล่องปรับขนาดที่สามารถเลื่อนขอบไปทาง **ตะวันตก (ซ้าย)** |
|
s-resize
cursor: s-resize
|
 |
 |
|
กล่องปรับขนาดที่สามารถเลื่อนขอบไปทาง **ใต้ (ล่าง)** |
|
e-resize
cursor: e-resize
|
 |
 |
|
กล่องปรับขนาดที่สามารถเลื่อนขอบไปทาง **ตะวันออก (ขวา)** |
|
nw-resize
cursor: nw-resize
|
 |
 |
|
กล่องปรับขนาดที่สามารถเลื่อนขอบไปทาง **ตะวันตกเฉียงเหนือ (ซ้ายบน)** |
|
ne-resize
cursor: ne-resize
|
 |
 |
|
กล่องปรับขนาดที่สามารถเลื่อนขอบไปทาง **ตะวันออกเฉียงเหนือ (ขวาบน)** |
|
sw-resize
cursor: sw-resize
|
 |
 |
|
กล่องปรับขนาดที่สามารถเลื่อนขอบไปทาง **ตะวันตกเฉียงใต้ (ซ้ายล่าง)** |
|
se-resize
cursor: se-resize
|
 |
 |
|
กล่องปรับขนาดที่สามารถเลื่อนขอบไปทาง **ตะวันออกเฉียงใต้ (ขวาล่าง)** |
|
ew-resize
cursor: ew-resize
|
 |
 |
|
กล่องปรับขนาดที่สามารถเลื่อนขอบในแนวนอนได้ทั้งสองทิศทาง |
|
ns-resize
cursor: ns-resize
|
 |
 |
|
กล่องปรับขนาดที่สามารถเลื่อนขอบในแนวตั้งได้ทั้งสองทิศทาง |
|
nesw-resize
cursor: nesw-resize
|
 |
 |
|
กล่องปรับขนาดที่สามารถเลื่อนขอบไปในทิศทาง **ตะวันออกเฉียงเหนือ-ตะวันตกเฉียงใต้ (ขวาบน & ซ้ายล่าง)** |
|
nwse-resize
cursor: nwse-resize
|
 |
 |
|
กล่องปรับขนาดที่สามารถเลื่อนขอบไปในทิศทาง **ตะวันตกเฉียงเหนือ-ตะวันออกเฉียงใต้ (ซ้ายบน & ขวาล่าง)** |
|
zoom-in
cursor: zoom-in
|
 |
 |
|
สามารถซูมเข้าได้ |
|
zoom-out
cursor: zoom-out
|
 |
 |
|
สามารถซูมออกได้ |
|
URL
|
สามารถตั้งค่าภาพใด ๆ เป็นเคอร์เซอร์ได้
ขนาดภาพจำกัดที่ **128 × 128px** ขนาดภาพตัวอย่างคือ **70 × 70px**
.cursorimg {cursor: url(image-path), auto;}
".cursorimg" สามารถตั้งเป็นชื่อใดก็ได้
<div {cursor: url(image-path), auto;}>Text</div>
《รองรับหน้าจอ Retina》
.cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;}
|
