CSS में, विभिन्न HTML तत्वों के लिए विभिन्न प्रकार के कर्सर का उपयोग किया जाता है, और कर्सर के प्रकार को बदलने के लिए, “ कर्सर 'संपत्ति का उपयोग किया जाता है। यह आपको कर्सर के प्रकार को बदलने और उस कर्सर का मान सेट करने की अनुमति देता है जिसे आप स्क्रीन पर प्रदर्शित करना चाहते हैं। एक अतिरिक्त विशेषता के रूप में, यह आपको अपनी स्वयं की कर्सर छवि सेट करने की सुविधा भी देता है।

इस गाइड में आप सीखेंगे:

• कर्सर सीएसएस संपत्ति क्या है
• CSS का उपयोग करके होवर पर कर्सर को छवि में कैसे बदलें

चलिए, शुरू करते हैं!

'कर्सर' सीएसएस संपत्ति क्या है?

HTML तत्व पर माउस की उपस्थिति को नियंत्रित करने के लिए, ' कर्सर 'सीएसएस की संपत्ति का उपयोग किया जा सकता है। यह नियमित कर्सर को विभिन्न प्रकारों में बदलने की अनुमति देता है जैसे कॉपी कर्सर, हैंड पॉइंटर, ग्रैब, और बहुत कुछ। आप कर्सर प्रॉपर्टी में इमेज का यूआरएल सेट करके अपना खुद का कस्टम कर्सर भी सेट कर सकते हैं।

वाक्य - विन्यास

कर्सर संपत्ति का सिंटैक्स इस प्रकार दिया गया है:

ऊपर दिए गए सिंटैक्स में, छवि का पथ निर्दिष्ट करें ' यूआरएल () 'जिसे आप स्क्रीन पर प्रदर्शित करना चाहते हैं।

अब हम नियमित कर्सर को होवर पर एक छवि में बदलने के लिए उदाहरण की ओर बढ़ेंगे।

CSS का उपयोग करके कर्सर को छवि में कैसे बदलें?

कर्सर को होवर पर किसी छवि में बदलने के लिए, सबसे पहले, HTML में एक तत्व जोड़ें।

उदाहरण 1: कर्सर को कर्सर प्रॉपर्टी का उपयोग करके होवर पर एक छवि में बदलना

हम एक शीर्षक

और बटन वर्ग का नाम बनाएंगे ' बीटीएन '

एचटीएमएल

< तन >
< एच 1 > होवर पर कर्सर को छवि में बदलें एच 1 >
< बटन कक्षा = 'बीटीएन' > मुझे क्लिक करो बटन >
तन >

वर्तमान में, बटन पर होवर करने पर डिफ़ॉल्ट कर्सर दिखाई देगा:

अब CSS पर जाएँ और कर्सर को इमेज में बदलें।

फिर, छवि का पथ 'में सेट करें यूआरएल () ' उदाहरण के लिए, हमने 'i .' निर्दिष्ट किया है साथ.एसवीजी 'हमारी चयनित छवि के रूप में। फिर, कर्सर संपत्ति का मान 'के रूप में सेट करें' ऑटो '

सीएसएस

.बीटीएन {
कर्सर: url ( आइकन.एसवीजी ) , ऑटो;
पैडिंग: 10px;
}

निम्नलिखित परिणाम देखने के लिए उपरोक्त कोड को सहेजें और HTML फ़ाइल को निष्पादित करें:

दिया गया आउटपुट इंगित करता है कि कर्सर सफलतापूर्वक होवर पर एक छवि में बदल गया है।

टिप्पणी: ' ऑटो 'कर्सर संपत्ति में एक वैकल्पिक विकल्प के रूप में प्रयोग किया जाता है; जब छवि लोड नहीं होती है, या फ़ाइल पथ या फ़ाइल स्वयं गायब है, तो ऑटो मान के कारण स्क्रीन पर डिफ़ॉल्ट आइकन प्रदर्शित होता है।

उदाहरण 2: होवर पर डिफ़ॉल्ट कर्सर सेट करना

उदाहरण के लिए, हम इमेज का url देंगे और केवल कर्सर प्रॉपर्टी का मान “के रूप में सेट करेंगे” ऑटो ':

कर्सर: url ( ) , ऑटो;

परिणामस्वरूप, बटन पर मँडराते समय कर्सर नहीं बदलेगा:

उदाहरण 3: होवर पर छवि विकल्प सेट करना

ऑटो के स्थान पर, आप उस कर्सर के विभिन्न मान सेट कर सकते हैं जिसे आप छवि के विकल्प के रूप में प्रदर्शित करना चाहते हैं। उदाहरण के लिए, हम कर्सर संपत्ति के मूल्य को 'से बदल देंगे' ऑटो ' प्रति ' सूचक ':

कर्सर: url ( ) , सूचक;

जैसा कि आप नीचे दिए गए आउटपुट में देख सकते हैं, जब यह बटन पर होवर करता है तो कर्सर एक हैंड पॉइंटर में बदल जाता है:

हमने CSS का उपयोग करके होवर पर कर्सर छवि को बदलने के लिए सबसे आसान तरीका प्रदान किया है।

निष्कर्ष

CSS में, आप कर्सर को 'होवर पर छवि में' का उपयोग करके बदल सकते हैं कर्सर ' संपत्ति। यह निर्दिष्ट करके एक नियमित कर्सर को एक छवि में बदलने की अनुमति देता है ' यूआरएल छवि का कर्सर संपत्ति के लिए। जब आप किसी तत्व पर होवर करते हैं तो आप किसी भी प्रकार के कर्सर को प्रदर्शित करना चाहते हैं जिसे आप प्रदर्शित करना चाहते हैं। इस लेख ने कर्सर को हैंड पॉइंटर में बदलने की विधि का प्रदर्शन किया।