कैस्केडिंग स्टाइल शीट्स (सीएसएस) का उपयोग करके डिज़ाइन किया गया है या एक्सएमएल (एक्सएचटीएमएल, एसवीजी सहित) प्रारूप। यह मुख्य रूप से स्वरूपण विधियों की एक विविध श्रृंखला के माध्यम से तत्वों का वर्णन करने के लिए उपयोग की जाने वाली शैली शीट भाषा है। तरीकों में से एक मँडरा है और इस लेख में, हम निम्नलिखित तरीके से CSS में होवर को समझेंगे:
- CSS में Hover क्या है?
- हॉवर का उपयोग कहां किया जाता है
- होवर क्या करता है?
- अनुकूलता
- यह कैसे काम करता है?
- होवर बैकग्राउंड का रंग 'रेड' में बदलें
- चित्र पर हॉवर अपारदर्शिता बनाना
- छवियों पर पाठ ओवरले बनाना
CSS में Hover क्या है?
CSS होवर एक चयनकर्ता घटक है जिसका उपयोग विभिन्न तत्वों को स्टाइल करने के लिए किया जाता है जब माउस पॉइंटर उनके ऊपर हो जाता है। उनका उपयोग लगभग हर HTML तत्व पर किया जा सकता है। CSS में होवर फीचर वेब पेज डिजाइनिंग में काफी महत्व रखता है।
होवर घटक एक कॉम्पैक्ट और प्रभावशाली वेब-डिजाइनिंग कार्यक्रम में उपयोगकर्ता की पसंद के अनुसार वेब पेजों को उजागर, एनकोड और कस्टमाइज़ कर सकता है।
हॉवर का उपयोग कहां किया जाता है
होवर फ़ीचर की व्यवहार्यता के सबसे आम उदाहरणों को फ्लिपकार्ट और अमेज़ॅन जैसी प्रमुख शॉपिंग वेबसाइटों पर हाइलाइट किया जा सकता है। जब उपयोगकर्ता इन ई-कॉमर्स वेबसाइटों पर किसी भी उत्पाद पर मंडराते हैं, तो उत्पाद को अपने चयनित उत्पादों के बेहतर दृश्य के साथ ग्राहक को प्रदान करने के लिए एक स्वचालित ज़ूम होवर फ़ंक्शन करने के लिए प्रोग्राम किया जाता है। इस प्रोग्रामिंग के माध्यम से, वेब पेज को पूरे उत्पाद रेंज के एक कॉम्पैक्ट दृश्य को प्रदर्शित करने के लिए डिज़ाइन किया गया है, साथ ही एक वेब पेज डिजाइन में रुचि के उत्पाद के विस्तृत दृश्य के साथ।
सूचनात्मक में परिवर्तन के प्रकार
होवर क्या करता है?
होवर एक बहुआयामी प्रोग्रामिंग उपकरण है, जिसके माध्यम से उपयोगकर्ता लक्ष्यीकरण प्रारूप को अंतहीन मापदंडों की संख्या के साथ अनुकूलित कर सकता है। होवर फ़ीचर के परिचालन के कुछ उदाहरणों में शामिल हैं:
- पृष्ठभूमि / फ़ॉन्ट रंग बदलना
- होवर पर प्रदर्शित छिपे हुए पाठ को एम्बेड करना
- छवियों पर रोलओवर प्रभाव बनाएँ
- पाठ / छवियों पर स्वचालित ज़ूम
- छवि अपारदर्शिता को संशोधित करें
- पाठ एंबेडिंग
- छवि स्वैप
- Div। होवर
- कई अन्य सीएसएस हॉवर स्वरूपण कार्य।
हॉवर प्रभाव मूल रूप से किसी तत्व के गुण मान को एक निर्दिष्ट पाठ / छवि या संबंधित तत्वों में परिवर्तन को सक्षम करने के लिए संशोधित करता है। एक वेब पेज डिजाइन में सीएसएस होवर तत्वों के एम्बेडिंग एक नियमित वेब पेज को एक इंटरैक्टिव, मजबूत और अत्यधिक कार्यात्मक वेब पेज में बदल देता है। ये वेब पेज डिजाइन उपयोगकर्ता के अनुकूल और व्यापक हैं। होवर के डिज़ाइन किए गए वेब पेजों में उच्च उपभोक्ता अपील होती है और वे संभावित ग्राहकों की सूचना को लुभाते हैं।
सीएसएस में होवर की संगतता
होवर सुविधा सभी प्रमुख वेब ब्राउज़रों के साथ संगत है। हालांकि, स्पर्श उपकरणों पर इस तत्व का कार्यान्वयन अभी भी एक चुनौतीपूर्ण कार्य है। CSS में होवर उन उपकरणों पर सामग्री की पहुंच को सक्षम बनाता है जो हॉवर फ़ंक्शंस का समर्थन नहीं करते हैं। यह देखा गया है कि गैर-सहायक डिवाइस पर एक सक्रिय होवर फ़ंक्शन डिवाइस पर अटक सकता है।
नतीजतन, महत्वपूर्ण सामग्री का महत्वपूर्ण प्रदर्शन स्वरूपण मुद्दे के माध्यम से अवरुद्ध है। एक तरफ जहाँ CSS प्रोग्राम में होवर तत्व वेब पेजों में कुशल स्तर पर कुशल निजीकरण का योगदान देता है, वहीं मोबाइल उपकरणों पर इसका संचालन अत्यधिक निष्क्रिय है। उन परिस्थितियों का अनुकरण करना, जहां सूचना प्रौद्योगिकी की दुनिया काफी बढ़ रही है, होवर फीचर जोखिम तकनीकी प्रगति के साथ अप्रचलित हो रहे हैं। इसलिए, एक पोर्टेबल एंबेडेड फीचर बनाने की जरूरत है जो टच और मोबाइल डिवाइस के साथ काम करता है।
CSS में Hover कैसे काम करता है?
सीएसएस होवर स्वरूपण में सक्रिय छद्म वर्ग शैली प्रमुख है और यह इस छद्म वर्ग द्वारा अनुसरण की जाने वाली किसी भी / बाद की किसी भी लिंक को ओवरराइड करती है। उदाहरण के लिए छद्म श्रेणी में ': लिंक: का दौरा किया, या: सक्रिय: मंडराना नियम के बाद रखा जाना चाहिए: लिंक और: दौरा किया, लेकिन पहले: उचित के लिए सक्रिय: होवर स्टाइल। LVHA- क्रम:: लिंक,: होवर,: विज़िट किया गया, और: सक्रिय का उपयोग उचित: होवर स्वरूपण शैली के लिए एक संदर्भ के रूप में किया जाता है।
div {पृष्ठभूमि-रंग: हरा पैडिंग: 18px प्रदर्शन: कोई नहीं} अवधि: होवर + div {प्रदर्शन: ब्लॉक}होवर टेस्ट!होवर पर हिडन कोड शो होता है
उपरोक्त कोड में, स्पान तत्व का उपयोग करके हॉवर और डिव तत्व को मर्ज करने के लिए संशोधित किया गया है: हॉवर + डिव तत्व। प्राथमिक लैंडिंग वेब पेज पर प्रदर्शित अवधि तत्व पाठ 'हॉवर परीक्षण' दिखाएगा! स्पैन तत्व पर आगे मंडराते हुए दिव्य तत्व का पता चलता है 'गुप्त कोड हॉवर पर दिखाता है'। यह एम्बेडिंग प्रारूप पाठ के साथ-साथ छवियों पर भी चालू है।
अजगर में, एक कक्षा की __in__ विधि का उपयोग किया जाता है
होवर बैकग्राउंड का रंग 'रेड' में बदलें
p: होवर, h1: होवर, a: होवर {बैकग्राउंड-कलर: रेड}होवर रेड
होवर रेड
लिंक:
होवर टेस्ट रेड:
Google.comध्यान दें: नमस्कार
उपरोक्त कोड कस्टमाइज़ करता है
,