टेलविंड में दृश्यता संपत्ति वाले होवर और अन्य राज्यों को कैसे लागू करें?

यह आलेख टेलविंड सीएसएस का उपयोग करके दृश्यता गुणों के साथ होवर और अन्य राज्यों को लागू करने की कार्यान्वयन प्रक्रिया से संबंधित है।

टेलविंड में दृश्यता उपयोगिता वाले होवर और अन्य राज्यों को कैसे लागू करें?

उपयोगकर्ता इंटरैक्शन पर दृश्यता परिवर्तन करने के लिए दृश्यता उपयोगिता का उपयोग होवर और अन्य राज्यों के साथ किया जा सकता है। दृश्यता उपयोगिता के अंतर्गत तीन वर्ग हैं अर्थात् ' दृश्यमान ”,“ अदृश्य ', और ' गिर जाना ”। आइए बेहतर समझ के लिए नीचे दिए गए उदाहरणों में कुछ दृश्यता वर्गों को होवर स्थिति के साथ एकीकृत करें।

उदाहरण 1: 'अदृश्य' वर्ग के साथ होवर स्टेट लागू करना

इस स्थिति में, जब उपयोगकर्ता का कर्सर तत्व पर होवर करेगा तो चयनित तत्व छिप जाएगा, कोड नीचे दिखाया गया है:

उपरोक्त कोड की व्याख्या:

• सबसे पहले, पैरेंट डिव बनाया जाता है जो एक तीन-कॉलम ग्रिड लेआउट बनाता है जिसमें प्रत्येक कॉलम और 'के मार्जिन' के बीच एक जगह होती है। 4px ”। टेलविंड सीएसएस का उपयोग करना ग्रिड ”,“ ग्रिड-कॉल्स-3 ”,“ अंतर ”,“ मेरा ', और ' एमएक्स क्रमशः कक्षाएं।
• अगला, तीन बच्चे ” डिव तत्व बनाए जाते हैं और उन पर बुनियादी स्टाइल लागू किया जाता है।
• फिर ' मंडराना 'सीएसएस में राज्य या चयनकर्ता को दूसरे' div 'को सौंपा गया है और' अदृश्य 'इसे कोलन द्वारा अलग करके सौंपा गया है' : ' संकेत। जब माउस उस पर मंडराता है तो यह दूसरे डिव को अदृश्य बना देता है।

निष्पादन चरण के बाद वेबपेज का पूर्वावलोकन:

उपरोक्त GIF से पता चलता है कि माउस होवर पर दूसरा डिव अदृश्य हो रहा है।

उदाहरण 2: 'अदृश्य' वर्ग के साथ सक्रिय अवस्था लागू करना

'सक्रिय' स्थिति तब शैलियाँ लागू होती है जब उपयोगकर्ता एक विशिष्ट तत्व का चयन करता है और छोड़ता नहीं है। टेक्स्ट बॉक्स की तरह ही जब कोई उपयोगकर्ता फ़ील्ड के अंदर डेटा दर्ज करना शुरू करता है, तो इस समय फ़ील्ड सक्रिय होती है। सक्रिय स्थिति की अधिक स्पष्ट समझ पाने के लिए और यह 'अदृश्य' वर्ग के साथ कैसे काम करता है, नीचे दिए गए कोड पर जाएँ:

उपरोक्त कोड में, 'की श्रेणी अदृश्य ' को ' को सौंपा गया है सक्रिय 'दूसरे के लिए राज्य' डिव 'तत्व का चयन होने पर दूसरे div तत्व को छिपा दिया जाता है।

निष्पादन के बाद, वेबपेज का पूर्वावलोकन इस तरह दिखाई देता है:

उपरोक्त आउटपुट से पता चलता है कि जब दूसरा 'div' चुना जाता है तो तत्व अदृश्य हो जाता है।

निष्कर्ष

चयनित तत्वों के लिए दृश्यता गुणों को संशोधित करने के लिए दृश्यता उपयोगिता द्वारा प्रदान की गई कक्षाओं के साथ होवर और सक्रिय या फोकस जैसी अन्य स्थितियों का उपयोग किया जा सकता है। माउस होवर पर तत्वों की दृश्यता को बदलने के लिए, होवर क्लास का उपयोग दृश्यता वर्गों के साथ रंग द्वारा अलग किया जाता है जैसे ' होवर: दृश्यमान ' या ' होवर: अदृश्य ”। इस ब्लॉग में विजिबिलिटी यूटिलिटी के साथ होवर स्टेट्स लागू करने की प्रक्रिया बताई गई है।