Css Tooltip Javascript használata nélkül
Ebben i bemutató megmutatom, hogyan hozhat létre css javascript tooltip nélkül ezt a nagyon egyszerű és hatékony technika. Remélem, hogy élvezni fogja ezt a hozzászólást.
Itt a Képernyőkép

Lépés: 1 Basic css kód
; padding : 0 ; } * (Margin: 0; padding: 0;) % normal Arial, Helvetica, sans-serif ; } body (font: 100% normál Arial, Helvetica, sans-serif;) : # 666 ; font-size : 12px ; line-height : 150 %; margin : 0 0 10px 0 ; } p (color: # 666; font-size: 12px; line-height: 150%; margin: 0 0 10px 0;) margin : 0 auto ; width : 550px ; } # oldal (margin: 0 auto; width: 550px;)
Itt van a mágikus-kód
: #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; / * háttérszínt IE * / text-decoration: none;) egy. 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; elhelyezkedés: abszolút; háttérben: # F20F27; border: 1px solid # C30018; color: # FFF;)
Lépés: 2 Basic HTML felépítése
> <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. Az EU a neque tortor lacinia rhoncus. A 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. Az EU a neque tortor lacinia rhoncus. class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. A 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. Az EU a neque tortor lacinia rhoncus. A 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>
Végül létrehozták a három oszlop css elrendezést.
Letöltés | Demo megtekintése
Kérjük, ossza meg velünk észrevételeit, akkor szeretném hallani a te ...
Kapcsolódó cikkek:
Ha élvezte olvasatban ezt a cikket, kérlek nézd meg a többi kapcsolódó cikkek a következők:

















































Submit a Comment