हम .cur (इंटरनेट एक्सप्लोरर के लिए), .gif और .png (क्रोम, फ़ायरफ़ॉक्स, सफारी के लिए) जैसे एक्सटेंशन के साथ एक कस्टम कर्सर छवि बना सकते हैं और इसे 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’ पर होवर करना बटन -
'पायथन' . पर मँडराते हुए बटन -
