การเปลี่ยนแปลงเคอร์เซอร์อาจไม่ใช่คุณสมบัติที่ได้รับความนิยมมากที่สุดในโลก แต่ก็ยังเป็นเครื่องมือที่มีประโยชน์สำหรับนักพัฒนา แม้ว่าเบราว์เซอร์จะเปลี่ยนเคอร์เซอร์สำหรับออบเจ็กต์บางอย่างโดยอัตโนมัติ เช่น ลิงก์และรายการที่ลากได้ นักพัฒนาซอฟต์แวร์จะได้ผลลัพธ์ที่ดีขึ้นจากการระบุเคอร์เซอร์ที่ต้องการโดยเฉพาะ
เปลี่ยนจุดเมาส์ใน CSS
ลักษณะที่ปรากฏของเคอร์เซอร์ถูกควบคุมโดยคุณสมบัติ CSS ของเคอร์เซอร์ คุณสมบัตินี้ควบคุมประเภทของเคอร์เซอร์ที่แสดงผลเมื่อผู้ใช้วางเมาส์เหนือวัตถุ ตัวอย่างเช่น การวางเมาส์เหนือวัตถุที่เกี่ยวข้องกับคลาสด้านล่างจะทำให้เกิดลูกศรลากสี่ทิศทาง:
.cursor { cursor: move;} เมื่อวางเมาส์เหนือวัตถุ ผู้ใช้จะเห็นเคอร์เซอร์เหมือนด้านล่าง
ตัวเลือกเคอร์เซอร์มาตรฐานใน CSS
มีตัวเลือกเคอร์เซอร์มากมายที่คุณสามารถตั้งค่าสำหรับการใช้งานเคอร์เซอร์ของคุณ โปรดทราบว่า "N" "S" "W" และ "E" ที่คุณเห็นในรายการหมายถึงทิศทางที่สำคัญของเหนือ ใต้ ตะวันออก และตะวันตก ตัวอย่างเช่น cursor: e-resize; แสดงแฮนเดิลปรับขนาดพร้อมลูกศรที่ “ตะวันออก” หรือด้านขวามือ
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;} Chris Coyier ตัวช่วยสร้างที่อยู่เบื้องหลัง CSS-Tricks.com ได้สร้าง doodle นี้เพื่อช่วยแสดงตัวเลือกเคอร์เซอร์ต่างๆ ใน CSS
การใช้รูปภาพเป็นเคอร์เซอร์
เช่นเดียวกับคุณสมบัติ CSS อื่นๆ คุณสมบัติเคอร์เซอร์ยังรับแอตทริบิวต์ผ่านข้อกำหนดของ URL ได้อีกด้วย ตัวอย่างเช่น คลาสด้านล่างจะใช้รูปภาพที่เกี่ยวข้องสำหรับเคอร์เซอร์
.cursor {cursor: url('path/to/image.png'), auto;} อัตโนมัติหลังจากนั้นระบุเคอร์เซอร์สำรอง แอตทริบิวต์อัตโนมัติจะแสดงเคอร์เซอร์ที่เบราว์เซอร์มักจะใช้สำหรับวัตถุปัจจุบันที่อยู่ใต้เคอร์เซอร์ คุณยังสามารถระบุรูปภาพเพิ่มเติมด้วยรายการที่คั่นด้วยเครื่องหมายจุลภาค หรือระบุเคอร์เซอร์ใดๆ เพื่อทำงานเป็นเคอร์เซอร์สำรอง
.cursor {cursor: url(cursor.svg), url(path/to/image.png), wait;} เบราว์เซอร์ไม่รองรับแอนิเมชั่นใดๆ ไม่ว่าจะเป็น GIF, SVG หรือ PNG แต่ PNG แบบโปร่งใสใช้งานได้กับเว็บเบราว์เซอร์ยอดนิยมทั้งหมดในตลาดปัจจุบัน SVG ไม่น่าเชื่อถือเท่าใน Firefox แต่ทำงานได้ดีในเบราว์เซอร์อื่น
ตามค่าเริ่มต้น “ฮอตสปอต” ของเคอร์เซอร์จะถูกตั้งค่าไว้ที่มุมซ้ายบนของภาพ หากต้องการระบุ "ฮอตสปอต" อื่น ให้ระบุคู่พิกัด (X,Y) ในการเรียกเคอร์เซอร์ของคุณ ตัวอย่างด้านล่างนี้จะตั้งค่าฮอตสปอตเป็น (3,3) โดยใช้ด้านซ้ายบนเป็น (0,0)
.cursor {cursor: url(cursor.svg) 3 3, pointer;} บทสรุป:การใช้แอตทริบิวต์เหล่านี้
หากคุณกำลังพัฒนาเว็บไซต์ คุณสามารถเพิ่มคุณสมบัติ CSS เหล่านี้ให้กับวัตถุใดๆ บนไซต์ของคุณเพื่อเปลี่ยนเคอร์เซอร์ที่ผู้ใช้เห็นเมื่อวางเมาส์เหนือวัตถุ หากคุณชอบการผจญภัยมากขึ้น คุณยังสามารถใช้ส่วนขยายของเบราว์เซอร์ เช่น Stylus, TamperMonkey หรือ GreaseMonkey เพื่อเรียกใช้ CSS ตามอำเภอใจที่ด้านบนของเว็บไซต์ ด้วยวิธีนี้ คุณสามารถแสดงเคอร์เซอร์ที่กำหนดเองได้ทุกที่ทุกเวลาที่คุณต้องการ
