คุณสมบัติ cursor ใช้สำหรับกำหนดหรือดึงค่ารูปแบบของเคอร์เซอร์เมาส์เมื่อชี้อยู่เหนือองค์ประกอบ
ไวยากรณ์ (Syntax)
object.style.cursor = value
ค่ามาตรฐาน (Standard Cursors)
| ค่า | คำอธิบาย | รูปเคอร์เซอร์ |
|---|
| auto | เบราว์เซอร์กำหนดเอง (ค่าเริ่มต้น) | 🖱️ |
| default | เคอร์เซอร์มาตรฐาน (ลูกศร) | ➡️ |
| pointer | ลูกชี้ (มือชี้) - สำหรับลิงก์/ปุ่ม | 👆 |
| text | ไอบีม (I-beam) - สำหรับข้อความ | 📝 |
| crosshair | เคอร์เซอร์ไขว้ (+) | ➕ |
| move | ลูกศร 4 ทิศ - ย้ายได้ | ⤡ |
| wait | นาฬิการอ/หมุน - กำลังโหลด | ⏳ |
| progress | ลูกศรพร้อมโหลด - ทำงานอยู่ | ⏳➡️ |
| help | เครื่องหมายคำถาม - ช่วยเหลือ | ❓ |
| not-allowed | วงกลมทับ - ห้าม/ไม่ได้ | 🚫 |
| no-drop | ห้ามวาง - Drag & Drop | 🚫📦 |
Resize Cursors (การปรับขนาด)
| ค่า | ทิศทาง | รูปเคอร์เซอร์ |
|---|
| e-resize | ตะวันออก (ขวา) | ↔️ |
| w-resize | ตะวันตก (ซ้าย) | ↔️ |
| n-resize | เหนือ (บน) | ↕️ |
| s-resize | ใต้ (ล่าง) | ↕️ |
| ne-resize | ตะวันออกเฉียงเหนือ | ↗️↙️ |
| nw-resize | ตะวันตกเฉียงเหนือ | ↖️↘️ |
| se-resize | ตะวันออกเฉียงใต้ | ↘️↖️ |
| sw-resize | ตะวันตกเฉียงใต้ | ↙️↗️ |
| ew-resize | แนวนอน (E-W) | ↔️ |
| ns-resize | แนวตั้ง (N-S) | ↕️ |
| nesw-resize | NE-SW | ↗️↙️ |
| nwse-resize | NW-SE | ↖️↘️ |
| col-resize | คอลัมน์ (แนวนอน) | ↔️│ |
| row-resize | แถว (แนวตั้ง) | ↕️─ |
ค่าพิเศษอื่นๆ
| ค่า | คำอธิบาย |
|---|
| grab | มือจับ - พร้อมลาก (Grabbing) |
| grabbing | มือจับติด - กำลังลาก |
| copy | เคอร์เซอร์คัดลอก (+ ไฟล์) |
| alias | เคอร์เซอร์อเลียส (ลูกศรโค้ง) |
| cell | เคอร์เซอร์เซลล์ (ตาราง) |
| context-menu | มี Context Menu |
| vertical-text | ข้อความแนวตั้ง |
| zoom-in | ซูมเข้า (+) |
| zoom-out | ซูมออก (-) |
| none | ไม่แสดงเคอร์เซอร์ |
| url('path.cur'), auto | Custom cursor (ต้องมี fallback) |
| initial | ค่าเริ่มต้น |
| inherit | สืบทอดจากพาเรนต์ |
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<head>
<style>
#one { background-color: beige; padding: 20px; margin: 10px 0; }
#two { background-color: lavender; padding: 20px; margin: 10px 0; }
</style>
<script>
function changeCursor() {
document.getElementById("one").style.cursor = "cell";
document.getElementById("two").style.cursor = "grab";
document.getElementById("Sample").innerHTML = "วางเมาส์บนย่อหน้าแรก = cell, ย่อหน้าที่สอง = grab";
}
</script>
</head>
<body>
<p id="one">ย่อหน้าแรก - วางเมาส์ดู cursor แบบ cell</p>
<p id="two">ย่อหน้าที่สอง - วางเมาส์ดู cursor แบบ grab</p>
<p>คลิกปุ่มเพื่อเปลี่ยนคุณสมบัติ cursor</p>
<button onclick="changeCursor()">เปลี่ยน Cursor</button>
<p id="Sample"></p>
</body>
</html>
ผลลัพธ์
หลังคลิกปุ่ม: วางเมาส์บนย่อหน้าแรก = 📊 cell cursor, ย่อหน้าที่สอง = 🤲 grab cursor
Custom Cursor
.custom-cursor {
cursor: url('cursor.cur'), url('cursor.png') 16 16, auto;
/* 16 16 = hotspot x y (จุดที่ชี้จริง) */
}
แนวทางปฏิบัติที่ดี (UX)
- pointer สำหรับทุกอย่างที่คลิกได้ (button, link, card)
- text สำหรับพื้นที่แก้ไขข้อความ
- grab/grabbing สำหรับ Drag & Drop
- not-allowed สำหรับปุ่ม disabled
- wait/progress สำหรับ loading state
- ไม่ควรเปลี่ยน cursor แบบสับสนผู้ใช้
- Custom cursor: ขนาดสูงสุด 128x128px, ใช้ .cur หรือ .png
