I In diesem Tutorial werde ich zeigen, wie Sie CSS Tooltip ohne JavaScript dies sehr einfache und wirkungsvolle Technik. Ich hoffe, Sie genießen diesem Post.

Hier ist der Screenshot

Schritt: 1 Grundlegende CSS-Code

 ; 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;) body (font: normal 100% Arial, Helvetica, sans-serif;) p (color: # 666; font-size: 12px; line-height: 150%; margin: 0 0 10px 0;) # page (margin: 0 auto; width: 550px;) 

Hier ist die Magie-Code

 : #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; / * Hintergrundfarbe für IE * / text-decoration: none;) ein. tooltip span (display: none; padding: 5px 5px; margin-left: 3px; margin-top: 10px; width: 170px; font-size: 12px; line-height: 150%;) ein. tooltip: hover span (display: inline; position: absolute; background: # F20F27; border: 1px solid # C30018; color: # FFF;) 

Schritt: 2 Grundlagen der HTML-Struktur

 > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div id = "page"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus.  In der EU ein neque tortor lacinia rhoncus.  In interdum Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus. </ SPAN> </ a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Suspendisse potenti.Lorem ipsum dolor sit amet, </ p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus.  In der EU ein neque tortor lacinia rhoncus.  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum <a href = "#" class = "tooltip"> placerat <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus. </ SPAN> </ a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Suspendisse potenti.Lorem ipsum dolor sit amet, </ p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus.  In der EU ein neque tortor lacinia rhoncus.  In interdum Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus. </ SPAN> </ a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Suspendisse potenti.Lorem ipsum dolor sit amet, </ p> </ div> 

Schließlich haben wir drei Spalten CSS Layout.
Download | Demo

Bitte teilen Sie uns Ihre Meinung mit, Wir würden uns freuen, von Ihnen zu hören ...

Abgelegt unter: Css, Tutorials von admin