सीएसएस :होवर चयनकर्ता एक तत्व का चयन करता है जब आप अपने कर्सर के साथ उस तत्व पर होवर करते हैं। उदाहरण के लिए, जब आप लिंक पर होवर करते हैं तो आप लिंक का रंग बदलने के लिए :hover का उपयोग कर सकते हैं।
जब उपयोगकर्ता उस तत्व पर होवर करता है तो आप अपने वेब पेज पर किसी तत्व पर लागू होने वाली शैलियों को परिवर्तित करना चाह सकते हैं।
यहीं पर CSS :hover चयनकर्ता आता है। :hover चयनकर्ता आपको तत्वों का चयन करने की अनुमति देता है जब आप उन पर माउस ले जाते हैं। जब उपयोगकर्ता तत्व पर होवर करता है तो यह आपको शैलियों को लागू करने देता है।
यह ट्यूटोरियल उदाहरणों के साथ, सीएसएस में चयनकर्ताओं की मूल बातें, और सीएसएस का उपयोग कैसे करें:होवर चयनकर्ता पर चर्चा करेगा। इस ट्यूटोरियल के अंत तक, आप उन तत्वों का चयन करने में विशेषज्ञ होंगे जिन पर :hover का उपयोग करके शैलियों को लागू किया जाना चाहिए।
सीएसएस चयनकर्ता
CSS में, चयनकर्ताओं का उपयोग उन HTML तत्वों का चयन करने के लिए किया जाता है, जिन पर आप किसी वेब पेज पर शैलियों को लागू करना चाहते हैं। चयनकर्ता आपको तत्वों को उनकी आईडी, वर्ग, समूह या विशेषताओं के आधार पर चुनने की अनुमति देते हैं, ताकि आप विशिष्ट तत्वों पर कुछ शैलियों को लागू कर सकें।
उदाहरण के लिए, मान लें कि आप HTML दस्तावेज़ के सभी
टैग को एक गर्म गुलाबी पृष्ठभूमि के साथ दिखाना चाहते हैं। आप इस कोड का उपयोग करके ऐसा कर सकते हैं: h1 { बैकग्राउंड-कलर:हॉटपिंक;}
इस कोड में, हम
चयनकर्ता का उपयोग करते हैं जिसका उपयोग वेब पेज पर सभी टैग का चयन करने के लिए किया जाता है। फिर, घुंघराले कोष्ठक में संलग्न, हम उस शैली को निर्दिष्ट करते हैं जिसे हम वेब पेज पर टैग पर लागू करना चाहते हैं। सीएसएस:होवर चयनकर्ता
टैग पर लागू करना चाहते हैं। सीएसएस:होवर चयनकर्ता
जब आप अपने माउस से तत्व पर होवर करते हैं तो CSS:होवर चयनकर्ता एक तत्व का चयन करता है। :होवर किसी भी सीएसएस तत्व पर इस्तेमाल किया जा सकता है, लेकिन यह आमतौर पर लिंक पर प्रयोग किया जाता है। :होवर उस तत्व के नाम के बाद निर्दिष्ट किया जाता है जिसे आप चुनना चाहते हैं, जैसे:एक लिंक के लिए होवर।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
ऐसे कई परिदृश्य हैं जहां आप :होवर चयनकर्ता का उपयोग करना चाह सकते हैं। यहां चयनकर्ता के लिए कुछ संभावित उपयोग के मामले दिए गए हैं:
- पाठ का रंग बदलना जब उपयोगकर्ता पाठ की एक पंक्ति पर माउस ले जाता है।
- उपयोगकर्ता द्वारा छवि पर माउस ले जाने पर छवि का आकार बदलना।
- उपयोगकर्ता द्वारा बटन पर माउस ले जाने पर बटन का रंग बदलना।
इन सभी उपयोग के मामलों में, एक विशिष्ट शैली लागू की जाती है जब उपयोगकर्ता अपने कर्सर के साथ किसी तत्व पर होवर करता है।
:होवर चयनकर्ता के लिए वाक्य रचना इस प्रकार है:
चयनकर्ता:होवर {// सीएसएस नियम} यहां :होवर सिंटैक्स के मुख्य घटक हैं:
- चयनकर्ता उन तत्वों की श्रेणी है जिन पर :होवर चयनकर्ता लागू किया जाएगा। इसलिए, यदि आप चाहते हैं कि जब भी कोई उपयोगकर्ता
तत्व पर होवर करे तो :hover प्रभाव ट्रिगर हो, तो आपको h3 निर्दिष्ट करना होगा ।
- :होवर करें ब्राउज़र को निर्देश देता है कि सीएसएस नियम में शैलियों को केवल तभी लागू किया जाना चाहिए जब उपयोगकर्ता एक निश्चित तत्व पर होवर कर रहा हो। यह तत्व चयनकर्ता . द्वारा है संपत्ति।
- सीएसएस नियम वे शैलियाँ हैं जिन्हें तब लागू किया जाना चाहिए जब उपयोगकर्ता चयनकर्ता . द्वारा परिभाषित तत्वों पर होवर करता है . उदाहरण के लिए, आप टेक्स्ट के लिए फ़ॉन्ट आकार या टैग की पृष्ठभूमि का रंग निर्दिष्ट कर सकते हैं। या आप <इनपुट> फ़ील्ड की सीमा त्रिज्या निर्दिष्ट कर सकते हैं।
आइए कुछ उदाहरणों के माध्यम से देखें कि आप एक वेब डेवलपर के रूप में CSS का उपयोग कैसे कर सकते हैं:होवर चयनकर्ता।
:होवर CSS उदाहरण
ऐसे कई तरीके हैं जिनमें :होवर चयनकर्ता का उपयोग किया जा सकता है। नीचे हम कुछ सामान्य परिदृश्यों के माध्यम से चलने जा रहे हैं जहां :hover चयनकर्ता उपयोगी हो सकता है।
CSS होवर प्रभाव:लिंक का रंग बदलें
जब उपयोगकर्ता लिंक पर होवर करता है तो :hover चयनकर्ता हमें किसी लिंक का रंग बदलने की अनुमति देता है।
मान लीजिए कि हम एक लिंक डिजाइन कर रहे हैं जिसमें कैरियर कर्म होमपेज . टेक्स्ट है और उपयोगकर्ता को करियर कर्म साइट पर भेजता है। यह लिंक हल्के हरे रंग में प्रकट होने के लिए सेट है हमारे वेब पेज पर।
हम चाहते हैं कि लिंक नारंगी . में बदल जाए जब उपयोगकर्ता अपने कर्सर के साथ लिंक पर होवर करता है। इस आशय को बनाने के लिए, हम निम्नलिखित कोड का उपयोग कर सकते हैं:
करियर कर्मा होमपेज