การเปลี่ยนรูปแบบของ Cursors โดยใช้ CSS

บทความนี้เรามาดูวิธีใช้ CSS ในการเปลี่ยนรูปแบบของ Cursor กันครับ

property cursor ใน CSS ช่วยให้เราสามารถใส่รูปแบบให้กับ Cursor ได้หลายแบบ

เว็บส่วนมากนำการใส่ Style ของ Cursors มาเพิ่มลูกเล่นให้กับเว็บ ทำให้เว็บมีความสวยงาม เป็นระเบียบมากยิ่งขึ้น อย่างเช่น เราสามารถใช้ Cursor รูปมือ โดยที่สิ่งนั้นไม่เป็นลิ้งได้ อย่างเช่น เราใส่ Style Cursor ให้ปุ่ม เวลาเอาเมาส์ไปวางแล้วให้กลายเป็นรูปมือ เราใส่ Style ให้กับ Cursor เป็นรูปแบบรอการทำงาน ใน event ให้กับฟังก์ชันต่าง ๆ ขณะกำลังทำงาน เป็นต้น สิ่งเหล่านี้ สามารถบ่งบอกการกระทำของเว็บได้ เรามาดูวิธีใส่กันเลยครับ

 
ต้องการย้าย
 

ผลลัพธ์ที่ได้

จากโค้ดข้างบนเราใช้ property cursor ในการบอกว่า จะกำหนด Style ให้กับ Cursor แล้ว ก็ใส่ move เพื่อให้เป็นรูปแบบของการเคลื่อนย้าย

เรามาดูรูปแบบอื่น ๆ กันบ้าง ตามตัวอย่างด้านล่าง

 
 
ทดลองโดยการเอาเมาส์ไปชี้ดูครับ
 
Auto
 
Crosshair
 
Default
 
Pointer
 
Move
 
e-resize
 
ne-resize
 
nw-resize
 
n-resize
 
se-resize
 
sw-resize
 
s-resize
 
w-resize
 
text
 
wait
 
help
 
 

ผลลัพธ์ที่ได้