เราสามารถสร้างรูปภาพเคอร์เซอร์กำหนดเองด้วยนามสกุลไฟล์อย่าง .cur (สำหรับ Internet Explorer), .gif และ .png (สำหรับ Chrome, Firefox, Safari) และนำไปใช้กับองค์ประกอบโดยใช้คุณสมบัติ CSS cursor และตั้งค่าเป็น url และเพิ่มค่า generic cursor เช่น auto, default, pointer ฯลฯ
วิธีแก้ไข
Selector { cursor: url("/*path to custom cursor file*/"), generic cursor; }
ตัวอย่าง
ลองดูวิธีสร้าง custom cursor ด้วยตัวอย่าง:
<!DOCTYPE html> <html> <head> <title>Custom Cursor Using CSS</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #tech1 { cursor: url("https://www.tutorialspoint.com/images/dbms.png"), auto; } #tech2 { cursor: url("https://www.tutorialspoint.com/images/Python.png"), auto; } </style> </head> <body> <form> <fieldset> <legend>Custom Cursor Using CSS</legend> <h1>Learn</h1> <input type="button" id="tech1" value="DBMS"> <input type="button" id="tech2" value="Python"> </fieldset> </form> </body></html>
ผลลัพธ์
ผลลัพธ์สำหรับโค้ดข้างต้น:
เมื่อชี้เมาส์ที่ปุ่ม 'DBMS':
เมื่อชี้เมาส์ที่ปุ่ม 'Python':
