इस मैनुअल का उद्देश्य यह पता लगाना है कि CSS का उपयोग करके होवर पर किसी छवि को कैसे बदला जाए। तो, चलिए शुरू करते हैं!
क्या है: CSS में होवर?
: होवर छद्म वर्ग का एक तत्व है जिसका उपयोग माउस द्वारा ट्रिगर किए जाने पर HTML तत्वों की स्थिति को बदलने के लिए किया जाता है। यह सीएसएस चयनकर्ता मुख्य रूप से शैली या तत्वों का चयन करने के लिए उपयोग किया जाता है। हालाँकि, इसे लिंक पर लागू नहीं किया जा सकता है।
वाक्य - विन्यास
होवर का सिंटैक्स नीचे दिया गया है:
तत्व : मंडराना {
सीएसएस कोड। . .
}
यहां, ' तत्व 'उस तत्व को संदर्भित करता है जिसमें आप होवर प्रभाव लागू करना चाहते हैं।
अब, हम CSS का उपयोग करके होवर पर छवि को बदलने के व्यावहारिक उदाहरण की ओर बढ़ेंगे।
उदाहरण: CSS का उपयोग करके होवर पर छवि कैसे बदलें?
पहले होवर पर छवि बदलने के लिए, HTML अनुभाग में दो छवियां जोड़ें। पहली छवि सक्रिय स्थिति के लिए है, और अगली छवि होवर स्थिति के लिए है।
चरण 1: चित्र जोड़ें
निर्दिष्ट उद्देश्य के लिए, हम दो चित्र जोड़ेंगे, “ छवि1 ' तथा ' छवि2 ”, और दूसरी छवि को वर्ग का नाम “के रूप में असाइन करें होवर_आईएमजी '
एचटीएमएल
< तन >< डिव कक्षा = 'आईएमजी' >
< आईएमजी एसआरसी = 'image1.png' >
< आईएमजी एसआरसी = 'image2.png' कक्षा = 'होवर_आईएमजी' >
< / डिव >
< / तन >
चरण 2: शैली छवियां
अब, “का उपयोग करके दोनों छवियों की स्थिति निर्धारित करने के लिए CSS पर जाएँ” स्थान ' संपत्ति। हम इसकी स्थिति 'के रूप में निर्धारित करेंगे' शुद्ध 'इसे अपने निकटतम माता-पिता के संदर्भ में पूरी तरह से स्थापित करने के लिए।
सीएसएस
आईएमजी {स्थान : शुद्ध ;
}
यह निम्नलिखित परिणाम दिखाएगा:
अगले चरण में, हम दूसरी छवि को पहले वाले के सामने सेट करेंगे। ऐसा करने के लिए, हम छवि की स्थिति को 'के रूप में सेट करेंगे' शुद्ध 'और ऊपर और बाएँ स्थिति को' के रूप में सेट करें 0 ' इस छवि का उपयोग पहली छवि के सामने रखा गया है, लेकिन हम दूसरी छवि प्रदर्शित करना चाहते हैं जब माउस उस पर होवर करता है। तो, प्रदर्शन मान को 'के रूप में सेट करना कोई भी नहीं 'वांछित परिणाम दिखाएगा:
.होवर_आईएमजी {स्थान : शुद्ध ;
ऊपर : 0 ;
बाएं : 0 ;
दिखाना : कोई भी नहीं ;
}
दिए गए कोड का आउटपुट इस प्रकार है:
पहली छवि के पीछे दूसरी छवि सफलतापूर्वक छिपी हुई है।
अब, अगले चरण पर जाएँ।
चरण 3: होवर पर छवि बदलें
अगला, उपयोग करें ' :होवर 'और चुनें' आईएमजी 'चयनित तत्व पर होवर लागू करने के लिए। फिर, दूसरी छवि का वर्ग नाम निर्दिष्ट करें ' .होवर_आईएमजी ' उसके बाद, कोष्ठक के अंदर, प्रदर्शन गुण का मान 'के रूप में सेट करें' इन - लाइन ' जो तत्व को एक ही पंक्ति में फिट होने के लिए बाध्य करेगा:
आईएमजी : मंडराना .होवर_आईएमजी {दिखाना : इन - लाइन ;
}
यहां वह परिणाम है जो दर्शाता है कि जब उपयोगकर्ता उस पर होवर करता है तो छवि बदल जाती है:
ऊपर दिया गया आउटपुट इंगित करता है कि हमने CSS का उपयोग करके होवर पर छवि को सफलतापूर्वक बदल दिया है।
निष्कर्ष
छवि को 'होवर' का उपयोग करके बदला जा सकता है :होवर 'छद्म वर्ग तत्व। ऐसा करने के लिए, HTML फ़ाइल में आवश्यक चित्र जोड़ें, उन्हें CSS का उपयोग करके उसी स्थिति में सेट करें, और उन पर :hover चयनकर्ता लागू करें। परिणामस्वरूप, उस पर होवर करने पर पहली छवि बदल जाएगी। इस लेख में, हमने एक व्यावहारिक उदाहरण के साथ: होवर का उपयोग करके होवर पर एक छवि को बदलने का तरीका समझाया है।