การเปลี่ยนเคอร์เซอร์อาจไม่ใช่ property ที่นิยมที่สุดในโลก แต่ยังคงเป็นเครื่องมือที่มีประโยชน์สำหรับนักพัฒนา แม้เบราว์เซอร์จะเปลี่ยนเคอร์เซอร์อัตโนมัติสำหรับวัตถุบางอย่าง เช่น ลิงก์และบางรายการที่ลากได้ แต่นักพัฒนาสามารถได้ผลลัพธ์ที่ดีกว่าจากการระบุเคอร์เซอร์ที่ต้องการอย่างชัดเจน
เปลี่ยนเมาส์พอยน์เตอร์ใน CSS
ลักษณะที่ปรากฏของเคอร์เซอร์ถูกควบคุมโดย CSS property ชื่อ cursor Property นี้ควบคุมประเภทของเคอร์เซอร์ที่เรนเดอร์เมื่อผู้ใช้เอาเมาส์ไปวางบนวัตถุ ตัวอย่างเช่น การวางเมาส์บนวัตถุที่เชื่อมโยงกับ class ด้านล่างจะสร้างลูกศรลาก 4 ทิศทาง:
.cursor { cursor: move; }
เมื่อวางเมาส์บนวัตถุ ผู้ใช้จะเห็นเคอร์เซอร์แบบด้านล่าง
ตัวเลือกเคอร์เซอร์มาตรฐานใน CSS
มีตัวเลือกเคอร์เซอร์หลากหลายที่คุณสามารถตั้งค่าสำหรับการใช้งานเคอร์เซอร์ของคุณ โปรดสังเกตว่า "N," "S," "W," และ "E" ที่คุณเห็นในรายการ หมายถึงทิศทาง Himmapan (cardinal directions) ของเหนือ ใต้ ตะวันตก และตะวันออก ตัวอย่างเช่น 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 properties คุณสมบัติ cursor ยังสามารถรับ attributes ผ่านการระบุ URL ได้ ตัวอย่างเช่น class ด้านล่างจะใช้ภาพที่เชื่อมโยงสำหรับเคอร์เซอร์
.cursor {cursor: url('path/to/image.png'), auto;}
auto หลังจากนั้นระบุ fallback cursor (เคอร์เซอร์สำรอง) แอตทริบิวต์ auto จะแสดงเคอร์เซอร์ที่เบราว์เซอร์มักใช้สำหรับวัตถุปัจจุบันใต้เคอร์เซอร์ คุณยังสามารถระบุภาพเพิ่มเติมด้วยรายการคั่นด้วยคอมม่า หรือระบุเคอร์เซอร์ใดๆ จากรายการให้ทำงานเป็น fallback cursor
.cursor {cursor: url(cursor.svg), url('path/to/image.png'), wait;}
Animation מכל סוג שהוא ไม่ว่าจะเป็น GIF, SVG, หรือ PNG ไม่ได้รับการรองรับจากเบราว์เซอร์ แต transparent PNGs ทำงานในเบราว์เซอร์ยอดนิยมทั้งหมดในวันนี้ SVGs ไม่ได้น่าเชื่อถือเท่าใน Firefox แต่ทำงานดีในเบราว์เซอร์อื่นๆ
โดยค่าเริ่มต้น "hot spot" (จุดร้อน) ของเคอร์เซอร์จะถูกตั้งค่าที่มุมซ้ายบนของภาพ เพื่อระบุ "hot spot" ที่แตกต่าง ให้ระบุคู่พิกัด (X,Y) ในการเรียกใช้ cursor ตัวอย่างด้านล่างจะตั้ง hot spot เป็น (3,3) ใช้มุมซ้ายบนเป็น (0,0)
.cursor {cursor: url(cursor.svg) 3 3, pointer;}
สรุป: การใช้แอตทริบิวต์เหล่านี้
หากคุณกำลังพัฒนาเว็บไซต์ คุณสามารถเพิ่ม CSS properties เหล่านี้ไปยังวัตถุใดๆ บนไซต์ของคุณ เพื่อเปลี่ยนเคอร์เซอร์ที่ผู้ใช้เห็นเมื่อวางเมาส์บนวัตถุ หากคุณชอบ冒险 (การผจญภัย) มากกว่า คุณยังสามารถใช้ส่วนขยายเบราว์เซอร์อย่าง Stylus, TamperMonkey หรือ GreaseMonkey เพื่อรัน CSS แบบ arbitrary (ตามใจชอบ) บนเว็บไซต์ วิธีนี้คุณสามารถแสดงเคอร์เซอร์กำหนดเองของคุณได้ทุกเมื่อและทุกที่ที่คุณต้องการ
