उदाहरण के लिए CSS के साथ Hover को कैसे कार्यान्वित करें



यह लेख आपको उदाहरणों के साथ सीएसएस में हॉवर को लागू करने का एक विस्तृत और व्यापक ज्ञान प्रदान करेगा।

कैस्केडिंग स्टाइल शीट्स (सीएसएस) का उपयोग करके डिज़ाइन किया गया है या एक्सएमएल (एक्सएचटीएमएल, एसवीजी सहित) प्रारूप। यह मुख्य रूप से स्वरूपण विधियों की एक विविध श्रृंखला के माध्यम से तत्वों का वर्णन करने के लिए उपयोग की जाने वाली शैली शीट भाषा है। तरीकों में से एक मँडरा है और इस लेख में, हम निम्नलिखित तरीके से CSS में होवर को समझेंगे:

CSS में Hover क्या है?

CSS होवर एक चयनकर्ता घटक है जिसका उपयोग विभिन्न तत्वों को स्टाइल करने के लिए किया जाता है जब माउस पॉइंटर उनके ऊपर हो जाता है। उनका उपयोग लगभग हर HTML तत्व पर किया जा सकता है। CSS में होवर फीचर वेब पेज डिजाइनिंग में काफी महत्व रखता है।





CSS में होवर करें

होवर घटक एक कॉम्पैक्ट और प्रभावशाली वेब-डिजाइनिंग कार्यक्रम में उपयोगकर्ता की पसंद के अनुसार वेब पेजों को उजागर, एनकोड और कस्टमाइज़ कर सकता है।



हॉवर का उपयोग कहां किया जाता है

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

सूचनात्मक में परिवर्तन के प्रकार

होवर क्या करता है?

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

  • पृष्ठभूमि / फ़ॉन्ट रंग बदलना
  • होवर पर प्रदर्शित छिपे हुए पाठ को एम्बेड करना
  • छवियों पर रोलओवर प्रभाव बनाएँ
  • पाठ / छवियों पर स्वचालित ज़ूम
  • छवि अपारदर्शिता को संशोधित करें
  • पाठ एंबेडिंग
  • छवि स्वैप
  • Div। होवर
  • कई अन्य सीएसएस हॉवर स्वरूपण कार्य।

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



सीएसएस में होवर की संगतता

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

नतीजतन, महत्वपूर्ण सामग्री का महत्वपूर्ण प्रदर्शन स्वरूपण मुद्दे के माध्यम से अवरुद्ध है। एक तरफ जहाँ CSS प्रोग्राम में होवर तत्व वेब पेजों में कुशल स्तर पर कुशल निजीकरण का योगदान देता है, वहीं मोबाइल उपकरणों पर इसका संचालन अत्यधिक निष्क्रिय है। उन परिस्थितियों का अनुकरण करना, जहां सूचना प्रौद्योगिकी की दुनिया काफी बढ़ रही है, होवर फीचर जोखिम तकनीकी प्रगति के साथ अप्रचलित हो रहे हैं। इसलिए, एक पोर्टेबल एंबेडेड फीचर बनाने की जरूरत है जो टच और मोबाइल डिवाइस के साथ काम करता है।

CSS में Hover कैसे काम करता है?

सीएसएस होवर स्वरूपण में सक्रिय छद्म वर्ग शैली प्रमुख है और यह इस छद्म वर्ग द्वारा अनुसरण की जाने वाली किसी भी / बाद की किसी भी लिंक को ओवरराइड करती है। उदाहरण के लिए छद्म श्रेणी में ': लिंक: का दौरा किया, या: सक्रिय: मंडराना नियम के बाद रखा जाना चाहिए: लिंक और: दौरा किया, लेकिन पहले: उचित के लिए सक्रिय: होवर स्टाइल। LVHA- क्रम:: लिंक,: होवर,: विज़िट किया गया, और: सक्रिय का उपयोग उचित: होवर स्वरूपण शैली के लिए एक संदर्भ के रूप में किया जाता है।

div {पृष्ठभूमि-रंग: हरा पैडिंग: 18px प्रदर्शन: कोई नहीं} अवधि: होवर + div {प्रदर्शन: ब्लॉक}होवर टेस्ट!होवर पर हिडन कोड शो होता है

उपरोक्त कोड में, स्पान तत्व का उपयोग करके हॉवर और डिव तत्व को मर्ज करने के लिए संशोधित किया गया है: हॉवर + डिव तत्व। प्राथमिक लैंडिंग वेब पेज पर प्रदर्शित अवधि तत्व पाठ 'हॉवर परीक्षण' दिखाएगा! स्पैन तत्व पर आगे मंडराते हुए दिव्य तत्व का पता चलता है 'गुप्त कोड हॉवर पर दिखाता है'। यह एम्बेडिंग प्रारूप पाठ के साथ-साथ छवियों पर भी चालू है।

अजगर में, एक कक्षा की __in__ विधि का उपयोग किया जाता है

होवर बैकग्राउंड का रंग 'रेड' में बदलें

p: होवर, h1: होवर, a: होवर {बैकग्राउंड-कलर: रेड}

होवर रेड

होवर रेड

लिंक:

होवर टेस्ट रेड:

Google.com

ध्यान दें: नमस्कार

उपरोक्त कोड कस्टमाइज़ करता है

,

तथा तत्व और उन्हें एक सामान्य मंडराना कार्य में एकीकृत करता है। इस कोड को टेक्स्ट कलर को लाल रंग में बदलने के लिए डिज़ाइन किया गया है जब माउस पॉइंटर उनके ऊपर हो। H1 और h2 घटक क्रमशः 'CSS: होवर टेस्ट कोड' और 'होवर रेड' प्रदर्शित करता है। पैरा तत्व: होवर टेस्ट रेड और एंकर टैग: google.com लाल रंग में हाइलाइट हो जाता है जब माउस पॉइंटर उनके ऊपर हो जाता है।

चित्र पर हॉवर अपारदर्शिता बनाना

.pic {चौड़ाई: 1900px ऊँचाई: 1900px अपारदर्शिता: 1 फ़िल्टर: अल्फा (अपारदर्शिता = 100) पृष्ठभूमि: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258/1280)। पीएनजी) नो-रिपीट} .पिक: होवर {अपारदर्शिता: 0.2 फिल्टर: अल्फा (अपारदर्शिता = 30)}

उपरोक्त सीएसएस कार्यक्रम मँडरा पर एक छवि की अस्पष्टता के संशोधन को प्रदर्शित करता है। छवि की मूल अपारदर्शिता है एक हालाँकि, अपारदर्शिता होवर फ़िल्टर का उपयोग करके इसे 0.2 तक संशोधित किया गया है। यह कोड प्रदर्शित करता है कि होवर तत्व का उपयोग करके कोई छवि और / या पाठ की अस्पष्टता को संशोधित कर सकता है।

कैसे जावा में सिंगलटन वर्ग लिखने के लिए

छवियों पर पाठ ओवरले बनाना

.pic {चौड़ाई: 4000px ऊँचाई: 2170px ऊँचाई: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {चौड़ाई: 3470px ऊँचाई: 2170px पृष्ठभूमि: #FFF अपारदर्शिता: 0}। .pic: hover .text {opacity: 0.6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} ऑरेंज एक फाइबर है समृद्ध फल। एक संतरे में मौजूद एंटी-ऑक्सीडेंट पाचन में मदद कर सकते हैं, त्वचा को चमक प्रदान कर सकते हैं और एंटी-एजिंग तत्व के रूप में कार्य कर सकते हैं।

सीएसएस होवर में टेक्स्ट लेयरिंग छवि के वर्णनात्मक पाठ को छवि के भीतर ही एम्बेड करने के लिए एक कुशल उपकरण है। यह उपकरण सीमित वेब-डिज़ाइनिंग स्पेस में सुप्त स्थान को ग्रहण किए बिना छवि का एक कॉम्पैक्ट अवलोकन प्रदान करने में सहायक है। इस कोड में, पृष्ठभूमि छवि एक वर्णनात्मक पाठ के साथ एम्बेडेड होती है जो प्रदर्शित करती है जब माउस पॉइंटर पाठ पर हो जाता है।



यह CSS में होवर के सभी महत्वपूर्ण पहलुओं का निष्कर्ष निकालता है और वेब विकास में इसकी प्रयोज्यता पर प्रकाश डालता है। कई विशेष प्रभाव हैं जो इसे हमारे वेब पेजों में ला सकते हैं। हम हमेशा एनीमेशन, पृष्ठभूमि छवियों, हाइपरलिंक आदि जैसे अन्य सीएसएस गुणों के साथ होवर चयनकर्ता के विभिन्न संयोजनों की कोशिश कर सकते हैं और इसकी क्षमता का पता लगा सकते हैं जैसा कि हमने अपने कुछ उदाहरणों में देखा था। अंत में, CSS वेबपेजों को डिजाइन और बदलने के लिए सबसे शक्तिशाली तरीकों में से एक है और इसलिए गतिशील वेब पेज बनाने के लिए वेब डेवलपर्स के लिए इस कौशल को प्राप्त करना आसन्न है।

हमारी जाँच करें जो प्रशिक्षक के नेतृत्व वाले लाइव प्रशिक्षण और वास्तविक जीवन की परियोजना के अनुभव के साथ आता है। यह प्रशिक्षण आपको बैक-एंड और फ्रंट-एंड वेब तकनीकों के साथ काम करने के लिए कौशल में कुशल बनाता है। इसमें वेब डेवलपमेंट, jQuery, Angular, NodeJS, ExpressJS और MongoDB पर प्रशिक्षण शामिल है।

क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया 'सीएसएस में होवर' ब्लॉग के टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।