CSS tooltip מבלי להשתמש Javascript
זה שאני מורה אני יראה לכם כיצד ליצור tooltip CSS ללא שימוש JavaScript זה מאוד פשוט ויעיל טכניקה. אני מקווה שאתה ייהנו זו.
הנה תמונת מסך

שלב: 1 בסיסי קוד CSS
; padding : 0 ; } * (Margin: 0; הריפוד: 0;) % normal Arial, Helvetica, sans-serif ; } גוף (font: 100% בדרך כלל Arial, Helvetica, sans-serif;) : # 666 ; font-size : 12px ; line-height : 150 %; margin : 0 0 10px 0 ; } (P צבע: # 666; בגודל הגופן: 12px; קו-גובה: 150%; margin: 0 0 10px 0;) margin : 0 auto ; width : 550px ; } # Page (margin: 0 auto; רוחב: 550px;)
הנה הקוד Magic
: #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; בגודל הגופן: 12px;) ת: לרחף (רקע: # fff; / * צבע רקע עבור ie * / text-decoration: none;) א. tooltip span (המוצגים: ללא; הריפוד: 5px 5px; שולי-שמאל: 3px; margin-top: 10px; רוחב: 170px; בגודל הגופן: 12px; קו-גובה: 150%;) א. tooltip: לרחף span (המוצגים: inline; מיקום: מוחלט; רקע: # F20F27; הגבול: 1px solid # C30018; צבע: # fff;)
שלב: 2 מבנה HTML בסיסי
> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div id = "page"> <p> Lorem ipsum צער לשבת amet, consectetur adipiscing elit. UT viverra dui Nec risus. האיחוד האירופי בשנת neque א tortor lacinia rhoncus. בשנת interdum Lorem ipsum צער לשבת amet, consectetur adipiscing elit. UT viverra dui Nec risus. </ Span> </ a> Lorem ipsum צער לשבת amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum צער לשבת amet, </ P> <p> Lorem ipsum צער לשבת amet, consectetur adipiscing elit. UT viverra dui Nec risus. האיחוד האירופי בשנת neque א tortor lacinia rhoncus. class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. בשנת interdum <a href = "#" בכיתה = "tooltip"> placerat <SPAN> Lorem ipsum צער לשבת amet, consectetur adipiscing elit. UT viverra dui Nec risus. </ Span> </ a> Lorem ipsum צער לשבת amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum צער לשבת amet, </ P> <p> Lorem ipsum צער לשבת amet, consectetur adipiscing elit. UT viverra dui Nec risus. האיחוד האירופי בשנת neque א tortor lacinia rhoncus. בשנת interdum Lorem ipsum צער לשבת amet, consectetur adipiscing elit. UT viverra dui Nec risus. </ Span> </ a> Lorem ipsum צער לשבת amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum צער לשבת amet, </ P> </ div>
לבסוף יצרנו שלושה טור פריסת CSS.
הורד | הצג הדגמה
בבקשה לחלוק איתנו את ההערות שלך, נשמח לשמוע ממך ...
מאמרים קשורים:
אם אתה נהנה לקרוא מאמר זה, אנא בדוק מאמרים אחרים הקשורים הבאים:

















































שלח תגובה