सीएसएस Tooltip जावास्क्रिप्ट का उपयोग करने के बिना
मैं इस ट्यूटोरियल में मैं कैसे जावास्क्रिप्ट यह बहुत ही सरल और प्रभावी तकनीक का उपयोग करते हुए बिना सीएसएस Tooltip बनाने के लिए आपको दिखाई देगा. मैं तुम्हें इस पोस्ट का आनंद उम्मीद है.
यहाँ स्क्रीनशॉट है
कदम: 1 बेसिक सीएसएस कोड
; padding : 0 ; } * (मार्जिन: 0; padding: 0;) % normal Arial, Helvetica, sans-serif ; } शरीर (font: 100% सामान्य Arial, Helvetica, बिना सेरिफ़;) : # 666 ; font-size : 12px ; line-height : 150 %; margin : 0 0 10px 0 ; } पी (रंग: # 666; font-size: 12px; लाइन-ऊँचाई: 150%; मार्जिन: 0 0 10px 0;) margin : 0 auto ; width : 550px ; } # पृष्ठ (मार्जिन: 0 ऑटो, चौड़ाई: 550px;)
यहाँ जादू कोड है
: #F00 ; font-size : 12px ; } a :hover { background : #fff ; /*background color for IE*/ text-decoration :none ; } a .tooltip span { display :none ; padding : 5px 5px ; margin-left : 3px ; margin-top : 10px ; width : 170px ; font-size : 12px ; line-height : 150 %; } a .tooltip :hover span { display :inline ; position :absolute ; background : #F20F27 ; border : 1px solid #C30018 ; color : #fff ; } एक (रंग: # F00; font-size: 12px;) एक: (background: # fff; / IE * / पाठ-सजावट के लिए * पृष्ठभूमि रंग:: none;) एक. Tooltip अवधि हॉवर (प्रदर्शन: कोई नहीं; padding: 5px 5px; मार्जिन-left: 3px; मार्जिन टॉप: 10px; चौड़ाई: 170px; font-size: 12px; लाइन-ऊँचाई: 150%;) एक. Tooltip: हॉवर अवधि (प्रदर्शन: इनलाइन; स्थिति: निरपेक्ष; पृष्ठभूमि: # F20F27; सीमा: 1px solid # C30018; रंग: # fff;)
चरण: 2 मूल HTML संरचना
> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div = "page"> <p> Lorem ipsum मातम amet, consectetur adipiscing elit बैठो आईडी. Ut viverra dui nec risus. एक tortor lacinia rhoncus यूरोपीय संघ neque में. Interdum में Lorem ipsum मातम amet, consectetur adipiscing elit बैठो. Ut viverra dui nec risus. </ Span> </ a> के Lorem ipsum मातम amet, consectetur adipiscing elit बैठो. Suspendisse potenti.Lorem ipsum मातम, </ p> <p> Lorem ipsum मातम amet, consectetur adipiscing elit बैठ amet बैठो. Ut viverra dui nec risus. एक tortor lacinia rhoncus यूरोपीय संघ neque में. class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum <a href में = "#" वर्ग = "tooltip"> placerat <SPAN> Lorem ipsum मातम, consectetur adipiscing elit amet बैठो. Ut viverra dui nec risus. </ Span> </ a> के Lorem ipsum मातम amet, consectetur adipiscing elit बैठो. Suspendisse potenti.Lorem ipsum मातम, </ p> <p> Lorem ipsum मातम amet, consectetur adipiscing elit बैठ amet बैठो. Ut viverra dui nec risus. एक tortor lacinia rhoncus यूरोपीय संघ neque में. Interdum में Lorem ipsum मातम amet, consectetur adipiscing elit बैठो. Ut viverra dui nec risus. </ Span> </ a> के Lorem ipsum मातम amet, consectetur adipiscing elit बैठो. Suspendisse potenti.Lorem ipsum मातम, </ p> </ div> amet बैठो
अंत में हम तीन कॉलम सीएसएस लेआउट बनाया है.
डाउनलोड | डेमो देखें
कृपया हमारे साथ अपनी टिप्पणी हिस्सा है, हम तुम से सुनने के लिए प्यार करता हूँ ...
संबंधित आलेख:
यदि आप इस लेख, नीचे अन्य संबंधित लेख बाहर की जाँच कृपया पढ़ मज़ा आया:
भेजें एक टिप्पणी