सीएसएस और HTML इंटरएक्टिव चार्ट

: होवर

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

कार्यान्वयन

समस्याओं के सार्वभौमिक समाधान के लिए एक फ़्लोचार्ट के रूप में लेना (मुझे खेद है कि मुझे यह चित्र कहाँ मिला, मुझे याद नहीं है:)

इसे इंटरैक्टिव बनाने का फैसला किया। कार्य का परिणाम इस लिंक पर देखा जा सकता है।
उन लोगों के लिए स्क्रीनशॉट जो क्लिक करने के लिए बहुत आलसी हैं:

अब कोड के बारे में थोड़ा

एचटीएमएल

संरचनात्मक इकाई पाठ के साथ एक स्पैन है। एक के बाद एक या दो ब्लॉकों में से प्रत्येक एक नया स्पैन है , और इसलिए, एक नई संरचनात्मक इकाई।

सीएसएस

वास्तव में इंजन ही:

कर्सर की स्थिति के आधार पर, एक या दूसरा ब्लॉक उस ब्लॉक के नीचे खड़ा होता है, जिसके ऊपर कर्सर स्थित होता है।

निष्कर्ष

मैं इस बात का ढोंग नहीं करता कि कोई मेरी उपलब्धियों का उपयोग उनकी परियोजना में करेगा, लेकिन मुझे लगता है कि यह छोटी सी रचना किसी को और भी असाधारण विचारों की ओर ले जाएगी।

एक बार फिर से मेरा फ़्लोचार्ट
CSS टूलटिप्स के बारे में