रहस्य का खुलासा: होवर के लिए सीएसएस दृश्यता विफल क्यों होती है

सीएसएस दृश्यता तत्व दृश्यता में हेरफेर करने का एक सुविधाजनक तरीका प्रदान करती है, लेकिन कभी-कभी यह विफल हो जाती है अप्रत्याशित बाधाएँ. एक ऐसे परिदृश्य पर विचार करें जहां आपने पाठ को प्रारंभ में अदृश्य करने और माउस होवर पर प्रकट करने के लिए एक "स्पॉइलर" वर्ग को परिभाषित किया है। आपकी अपेक्षाओं के बावजूद, आपके होवर प्रयासों को धता बताते हुए, पाठ हठपूर्वक अपनी छिपी हुई स्थिति में बना रहता है।

कारण में गोता लगाना

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

CSS:

.स्पॉइलर स्पैन { दृश्यता: छिपा हुआ; } .स्पॉइलर: होवर स्पैन { दृश्यता: दृश्यमान; }

HTML:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

स्पष्टीकरण:

Spoiler: E.T. phones home.

.स्पॉयलर { रूपरेखा: 1px ठोस पारदर्शी; ) छिपे हुए पाठ की अदृश्यता और एक निर्बाध होवरिंग अनुभव प्रदान करना।