Get Adobe Flash player

CSS : การใช้ cursor

ปกติแล้วเวลาใช้งานเว็บไซต์ต่างๆ CURSOR หรือเมาส์ที่ชี้มักจะแสดงในรูปลูกศร หรือเป็นรูปมือเวลาเลื่อนเมาส์ไปชี้ที่ LINK ต่างๆ แต่ถ้าต้องการตกแต่งเว็บไซต์ให้มีความน่าสนใจยิ่งขึ้น การเปลี่ยนรูป CURSOR ก็เป็นอีกเทคนิคหนึ่งที่สามารถทำได้ง่ายๆ

การเปลี่ยนรูป CURSOR สามารถเขียนด้วย CSS ด้วยคำสั่งนี้

cursor: รูปแบบที่ต้องการให้แสดง;

 

ตัวอย่างการใช้

<a href=”https://www.yourlink_url.com” style=”cursor:crosshair“>ลากเมาส์มาตรงนี้</a>

 

ผลลัพธ์

ลากเมาส์มาตรงนี้
 

เมื่อเลื่อนเมาส์ไปชี้ จะสังเกตได้ว่า CURSOR จะแสดงผลต่างไปจากปกติ ซึ่งเป็นไปตามรูปแบบที่เรากำหนด
ซึ่งรูปแบบของ CURSOR ภายใต้คำสั่ง CSS ที่สามารถเปลี่ยนรูปแบบได้หลายรูปแบบ อย่างเช่นรูปนี้

Credit :

  • http://coursesweb.net/css/css-cursor-property-custom-cursors
  • https://www.webcodegeeks.com/css/css-cursor-pointer-example/
  • http://www.codetukyang.com/html/technic/mouseover_chg_cursor.htm

Leave a Reply

Your email address will not be published. Required fields are marked *