Σε αυτό το i σεμινάριο θα σας δείξει πώς να δημιουργήσετε css tooltip δεν χρησιμοποιούν javascript αυτή την πολύ απλή και αποτελεσματική τεχνική. Ελπίζω ότι θα απολαύσετε τη θέση αυτή.

Εδώ είναι το Screenshot

Βήμα: 1 Βασικές Css Κωδικός

 ; padding : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } p { color : # 666 ; font-size : 12px ; line-height : 150 %; margin : 0 0 10px 0 ; } #page { margin : 0 auto ; width : 550px ; } * (Margin: 0? Padding: 0?) (Σώμα font: 100% κανονικό Arial, Helvetica, sans-serif?) P (color: # 666? Font-size: 12px? Line-height: 150%? Margin: 0 0 10px 0?) # page (margin: 0 auto? πλάτος: 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 ; } a (color: # F00? font-size: 12px?) a: hover (background: # fff? / * χρώμα φόντου για IE * / text-decoration: Δεν υπάρχει?) μία. span tooltip (απεικόνιση: Δεν υφίσταται? padding: 5px 5px? margin-left: 3px? margin-top: 10px? πλάτος: 170px? font-size: 12px? line-height: 150%?) μία. tooltip: hover span (display: inline? θέση: απόλυτη? background: # F20F27? border: 1px solid # C30018? color: # fff?) 

Βήμα: 2 Βασικές HTML Διάρθρωση

 > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div id = "page"> <p> Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing elit.  Ut viverra dui nec risus.  Σε neque eu ένα rhoncus lacinia tortor.  Σε interdum Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing elit.  Ut viverra dui nec risus. </ SPAN> </ a> Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing elit.  Suspendisse potenti.Lorem Ipsum θλίψη κάθεται Οργανισμός, </ p> <p> Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing elit.  Ut viverra dui nec risus.  Σε neque eu ένα rhoncus lacinia tortor.  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Σε href <a interdum = "#" class = "tooltip"> placerat dolor <span> Lorem ipsum sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus. </ SPAN> </ a> Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing elit.  Suspendisse potenti.Lorem Ipsum θλίψη κάθεται Οργανισμός, </ p> <p> Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing elit.  Ut viverra dui nec risus.  Σε neque eu ένα rhoncus lacinia tortor.  Σε interdum Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing elit.  Ut viverra dui nec risus. </ SPAN> </ a> Lorem Ipsum θλίψη κάθεται Οργανισμός, consectetur adipiscing elit.  Suspendisse potenti.Lorem Ipsum θλίψη κάθεται Οργανισμός, </ p> </ p> 

Τέλος, έχουμε δημιουργήσει τρία διάταξη css στήλη.
Download | Προβολή Demo

Παρακαλώ μερίδιο τις παρατηρήσεις σας μαζί μας, θα θέλαμε να ακούσουμε από εσάς ...

Filed under: Css, Tutorials από admin