การเปลี่ยนรูปแบบของ 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



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


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