เราสามารถสร้างภาพเคอร์เซอร์แบบกำหนดเองที่มีนามสกุลเช่น .cur (สำหรับ Internet Explorer), .gif และ .png (สำหรับ Chrome, Firefox, Safari) และนำไปใช้กับองค์ประกอบโดยใช้คุณสมบัติเคอร์เซอร์ CSS และตั้งค่าเป็น url และใน เพิ่มค่าเคอร์เซอร์ทั่วไป เช่น อัตโนมัติ ค่าเริ่มต้น ตัวชี้ ฯลฯ
วิธีแก้ปัญหา
Selector {
cursor: url("/*path to custom cursor file*/"), generic 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' ปุ่ม −
