আমরা .cur (ইন্টারনেট এক্সপ্লোরারের জন্য), .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'-এর উপর ঘোরাফেরা করা বোতাম -
