CSS :hover - एक हाउ-टू गाइड

CSS :hover सेलेक्टर उस एलिमेंट को सेलेक्ट करता है जब आप अपने कर्सर से उस एलिमेंट पर होवर करते हैं। उदाहरण के लिए, जब आप लिंक पर होवर करते हैं तो लिंक का कलर बदलने के लिए आप :hover का उपयोग कर सकते हैं।

आप अपने वेब पेज पर किसी एलिमेंट पर लागू होने वाली स्टाइल्स को ट्रांजिशन करना चाह सकते हैं जब यूज़र उस एलिमेंट पर होवर करता है।

यहीं CSS :hover सेलेक्टर काम आता है। :hover सेलेक्टर आपको एलिमेंट्स को सेलेक्ट करने की अनुमति देता है जब आप उन पर माउस करते हैं। यह आपको स्टाइल लागू करने देता है जब यूज़र एलिमेंट पर होवर करता है।

यह ट्यूटोरियल, उदाहरणों के साथ, CSS में सेलेक्टर्स की मूल बातें, और CSS :hover सेलेक्टर का उपयोग कैसे करें, पर चर्चा करेगा। इस ट्यूटोरियल के अंत तक, आप :hover का उपयोग करके उन एलिमेंट्स को सेलेक्ट करने में एक्सपर्ट होंगे जिन पर स्टाइल लागू होनी चाहिए।

CSS सेलेक्टर्स

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

उदाहरण के लिए, मान लीजिए आप HTML डॉक्यूमेंट में सभी <h1> टैग्स को हॉट पिंक बैकग्राउंड के साथ दिखाना चाहते हैं। आप इसे इस कोड का उपयोग करके कर सकते हैं:

h1 { background-color: hotpink; }

इस कोड में, हम <h1> सेलेक्टर का उपयोग करते हैं जिसका उपयोग वेब पेज पर सभी <h1> टैग्स को सेलेक्ट करने के लिए किया जाता है। फिर, कर्ली ब्रैकेट्स के भीतर संलग्न, हम वह स्टाइल निर्दिष्ट करते हैं जिसे हम वेब पेज पर <h1> टैग्स पर लागू करना चाहते हैं।

CSS :hover सेलेक्टर

CSS :hover सेलेक्टर उस एलिमेंट को सेलेक्ट करता है जब आप अपने माउस से एलिमेंट पर होवर करते हैं। :hover किसी भी CSS एलिमेंट पर उपयोग किया जा सकता है, लेकिन यह आमतौर पर लिंक्स पर उपयोग किया जाता है। :hover उस एलिमेंट के नाम के बाद निर्दिष्ट किया जाता है जिसे आप सेलेक्ट करना चाहते हैं, जैसे लिंक के लिए a:hover।

:hover सेलेक्टर का उपयोग करने के लिए कई संभावित परिदृश्य हैं। यहां सेलेक्टर के लिए कुछ संभावित उपयोग के मामले हैं:

• जब यूज़र टेक्स्ट की एक लाइन पर माउस करता है तो टेक्स्ट का कलर बदलना।
• जब यूज़र इमेज पर माउस करता है तो इमेज का आकार बदलना।
• जब यूज़र बटन पर माउस करता है तो बटन का कलर बदलना।

इन सभी उपयोग के मामलों में, एक विशिष्ट स्टाइल लागू होती है जब यूज़र अपने कर्सर से किसी एलिमेंट पर होवर करता है।

:hover सेलेक्टर का सिंटैक्स इस प्रकार है:

selector:hover { // CSS rules }

यहां :hover सिंटैक्स के मुख्य घटक हैं:

• सेलेक्टर वह रेंज है जिस पर :hover सेलेक्टर लागू होगा। इसलिए, यदि आप चाहते थे कि :hover इफेक्ट ट्रिगर हो जब भी यूज़र <h3> एलिमेंट पर होवर करता है, तो आप h3 निर्दिष्ट करेंगे।
• :hover ब्राउज़र को निर्देश देता है कि CSS नियम में स्टाइल्स केवल तभी लागू की जानी चाहिए जब यूज़र सेलेक्टर प्रॉपर्टी द्वारा परिभाषित एक निश्चित एलिमेंट पर होवर कर रहा हो।
• CSS नियम वे स्टाइल्स हैं जिन्हें लागू किया जाना चाहिए जब यूज़र सेलेक्टर द्वारा परिभाषित एलिमेंट्स पर होवर करता है। उदाहरण के लिए, आप टेक्स्ट के लिए फॉन्ट साइज या <div> टैग के बैकग्राउंड कलर को निर्दिष्ट कर सकते हैं। या आप <input> फील्ड के बॉर्डर रेडियस को निर्दिष्ट कर सकते हैं।

आइए कुछ उदाहरणों के माध्यम से चलते हैं ताकि यह प्रदर्शित किया जा सके कि आप एक वेब डेवलपर के रूप में CSS :hover सेलेक्टर का उपयोग कैसे कर सकते हैं।

:hover CSS उदाहरण

:hover सेलेक्टर का उपयोग करने के कई तरीके हैं। नीचे हम उन कुछ सामान्य परिदृश्यों के माध्यम से चलने जा रहे हैं जहां :hover सेलेक्टर उपयोगी हो सकता है।

CSS होवर इफेक्ट: लिंक का कलर बदलें

:hover सेलेक्टर हमें लिंक का कलर बदलने की अनुमति देता है जब यूज़र लिंक पर होवर करता है।

मान लीजिए हम एक लिंक डिज़ाइन कर रहे हैं जिसमें टेक्स्ट करियर कर्मा होमपेज है और यूज़र को करियर कर्मा साइट पर भेजता है। यह लिंक हमारे वेब पेज पर लाइटग्रीन कलर में दिखाने के लिए सेट है।

हम चाहते हैं कि जब यूज़र अपने कर्सर से लिंक पर होवर करे तो लिंक ऑरेंज में बदल जाए। इस इफेक्ट को बनाने के लिए, हम निम्न कोड का उपयोग कर सकते हैं:

<html> <a href="https://careerkarma.com">Career Karma homepage</a> <html> <style> a { color: lightgreen; } a:hover { color: orange; } <style>

ऊपर कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

आइए हमारे कोड को तोड़ते हैं।

हमारी HTML फाइल में, हम <a> टैग का उपयोग करके करियर कर्मा होमपेज का लिंक परिभाषित करते हैं। फिर, हमारे CSS कोड में, हम दो नियम परिभाषित करते हैं।

पहला नियम हमारे वेब पेज पर सभी HTML <a> टैग्स पर लागू होता है। हमारा नियम color प्रॉपर्टी का उपयोग करके सभी <a> टैग्स के टेक्स्ट कलर को लाइटग्रीन पर सेट करता है।

दूसरा नियम वेब पेज पर <a> टैग के कलर को ऑरेंज में बदल देता है जब यूज़र <a> टैग पर होवर करता है। यह :hover सेलेक्टर का उपयोग करके प्राप्त किया जाता है।

तो, जब यूज़र टेक्स्ट करियर कर्मा होमपेज पर होवर करता है, तो लिंक का कलर ऑरेंज में बदल जाता है।

CSS होवर इफेक्ट: टेक्स्ट का एक ब्लॉक दिखाएं

:hover सेलेक्टर का उपयोग टेक्स्ट का एक ब्लॉक दिखाने के लिए भी किया जा सकता है जब यूज़र टेक्स्ट की एक लाइन पर होवर करता है।

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

<html> <span>What is Career Karma?</span> <div>Career Karma is a community of peers, mentors, and coaches that will help you land a dream career in tech.</div> <html> <style> div { display: none; background-color: orange; padding: 10px; } span:hover + div { display: block; } <style>

ऊपर कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमने प्रश्न "करियर कर्मा क्या है?" बनाने के लिए <span> टैग का उपयोग किया जो हमारे वेब पेज पर दिखाई देता है। फिर, हमने एक <div> टैग का उपयोग किया जिसमें प्रश्न का उत्तर है।

हमारी CSS फाइल में, हमने अपने <div> टैग के लिए निम्न स्टाइल्स का उपयोग किया:

• display: none, जो हमारे <div> टैग को अदृश्य बनाता है।
• background-color: orange, जो हमारे <div> टैग के बैकग्राउंड कलर को ऑरेंज पर सेट करता है।
• CSS पैडिंग: 10px, जो हमारे <div> टैग के कंटेंट और उसके बॉर्डर्स के बीच 10px का गैप बनाता है।

फिर हमने span:hover + div सेलेक्टर का उपयोग करके एक नियम परिभाषित किया। यह नियम हमारे <div> टैग में display नियम की स्टाइल को block में बदल देता है, जो इसे दिखाता है। तो, जब यूज़र हमारे <span> टैग पर होवर करता है (span:hover द्वारा दर्शाया गया), तो <div> टैग विजिबल हो जाएगा।

इमेज बदलें: CSS ऑन होवर

एक और परिदृश्य जहां :hover सेलेक्टर का उपयोग किया जा सकता है वह है वेब पेज पर इमेज बदलना। इमेज तब बदलेगी जब यूज़र अपने कंप्यूटर कर्सर से इमेज पर होवर करेगा।

मान लीजिए हम एक स्थानीय कॉफी शॉप के लिए एक वेबसाइट डिज़ाइन कर रहे हैं। जब यूज़र उनके अबाउट पेज पर कॉफी की स्टॉक इमेज पर होवर करता है, तो एक नई इमेज मौजूदा इमेज को रिप्लेस करनी चाहिए। नई इमेज एक कैफे की स्टॉक इमेज होनी चाहिए।

हम इमेज होवर इफेक्ट को पूरा करने के लिए निम्न कोड का उपयोग कर सकते हैं:

<html> <img height="750" width="1250" class="aboutImage" /> <html> <style> .aboutImage { background: url("https://images.unsplash.com/photo-1497515114629-f71d768fd07c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1062&q=80"); } .aboutImage:hover { background: url("https://images.unsplash.com/photo-1525610553991-2bede1a236e2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"); } <style>

ऊपर कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमने एक <img> टैग परिभाषित किया जो एक इमेज बनाता है जो 750px लंबी और 1250px चौड़ी है। टैग को दी गई क्लास aboutImage कहलाती है।

हमारी CSS फाइल में, हमने दो नियम घोषित किए।

पहला नियम क्लास नेम .aboutImage वाले एलिमेंट में प्रदर्शित होने वाली बैकग्राउंड इमेज को सेट करता है। हम कॉफी की एक स्टॉक फोटो को बैकग्राउंड इमेज के रूप में उपयोग करते हैं।

दूसरा नियम, .aboutImage:hover, उस एलिमेंट की बैकग्राउंड इमेज को बदल देता है जिस पर .aboutImage क्लास है जिस पर यूज़र होवर कर रहा है। दिखाई देने वाली नई इमेज एक कैफे की स्टॉक इमेज है।

:hover सेलेक्टर के अन्य उपयोग

जैसा कि हमने पहले चर्चा की, कई परिदृश्य हैं जहां :hover सेलेक्टर उपयोगी हो सकता है। यदि आप :hover सेलेक्टर के एक्शन में अधिक उदाहरण ढूंढ रहे हैं, तो हम इन अन्य करियर कर्मा ट्यूटोरियल्स को देखने की सलाह देते हैं:

• CSS ट्रांजिशन: एक गाइड कि कैसे ट्रांजिशन बनाएं जो तब दिखाई देते हैं जब यूज़र वेब पेज पर किसी एलिमेंट पर होवर करता है।
• CSS नेविगेशन बार: CSS का उपयोग करके नेविगेशन बार बनाने पर एक गाइड।
• CSS ड्रॉपडाउन मेनू: CSS का उपयोग करके ड्रॉपडाउन मेनू बनाने पर एक गाइड।

होवर सेलेक्टर का उपयोग बटन होवर इफेक्ट्स बनाने के लिए भी किया जाता है। ये इफेक्ट्स बटन की उपस्थिति को बदलते हैं और होवर एनिमेशन ट्रिगर करते हैं।

हमारे पास CSS सेलेक्टर्स पर एक गाइड भी है जिसे आप अन्य सेलेक्टर्स के बारे में अधिक जानने के लिए पढ़ सकते हैं।

निष्कर्ष

CSS :hover सेलेक्टर आपको उस एलिमेंट को सेलेक्ट करने की अनुमति देता है जब यूज़र कर्सर से एलिमेंट पर होवर करता है। एक बार एलिमेंट सेलेक्ट हो जाने पर, आप स्टाइल्स का एक नया सेट लागू कर सकते हैं। ये तब तक विजिबल रहते हैं जब तक यूज़र अपने कर्सर से एलिमेंट पर होवर करना बंद नहीं करता।

इस ट्यूटोरियल ने, उदाहरणों के साथ, CSS सेलेक्टर्स की मूल बातें और :hover सेलेक्टर का उपयोग कैसे करें, पर चर्चा की। अब आप :hover सेलेक्टर का उपयोग एक CSS एक्सपर्ट की तरह शुरू करने के लिए तैयार हैं!

शीर्ष CSS शिक्षण संसाधनों, कोर्सेज, और किताबों पर सलाह के लिए, हमारा CSS सीखने का गाइड देखें।