Šajā i apmācība i jums parādīs kā izveidot css Tooltip neizmantojot javascript šo ļoti vienkārša un efektīva metode. Ceru, ka jums patiks šī post.

Šeit ir Ekrānuzņēmums

Solis: 1 Basic css Kods

  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  % normal  Arial, Helvetica, sans-serif ; } ķermeņa (font: 100% normāla 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 ; } # page (margin: 0 auto; width: 550px;) 

Šeit ir burvju kods

 : #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: savilkties (background: # FFF; / * fona krāsu IE * / text-decoration: none;) a. Tooltip span (Rādīt: none; padding: 5px 5px; margin-left: 3px; margin-top: 10px; width: 170px; font-size: 12px; line-height: 150%;) a. Tooltip: savilkties span (Rādīt: inline; nostāja: absolūtā; background: # F20F27; border: 1px solid # C30018; color: # FFF;) 

Solis: 2 Pamata HTML Struktūra

 > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div id = "page"> <p> Lorem ipsum bēdas sit amet, consectetur adipiscing elit.  Ut viverra dui citur neminēti risus.  In eu neque a tortor lacinia rhoncus.  In interdum Lorem ipsum bēdas sit amet, consectetur adipiscing elit.  Ut viverra dui citur neminēti risus. </ Span> </ a> Lorem ipsum bēdas sit amet, consectetur adipiscing elit.  Suspendisse potenti.Lorem ipsum bēdas sit amet, </ p> <p> Lorem ipsum bēdas sit amet, consectetur adipiscing elit.  Ut viverra dui citur neminēti risus.  In eu neque a tortor lacinia rhoncus.  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum <a href = "#" klase = "tooltip"> placerat <span> Lorem ipsum bēdas sit amet, consectetur adipiscing elit.  Ut viverra dui citur neminēti risus. </ Span> </ a> Lorem ipsum bēdas sit amet, consectetur adipiscing elit.  Suspendisse potenti.Lorem ipsum bēdas sit amet, </ p> <p> Lorem ipsum bēdas sit amet, consectetur adipiscing elit.  Ut viverra dui citur neminēti risus.  In eu neque a tortor lacinia rhoncus.  In interdum Lorem ipsum bēdas sit amet, consectetur adipiscing elit.  Ut viverra dui citur neminēti risus. </ Span> </ a> Lorem ipsum bēdas sit amet, consectetur adipiscing elit.  Suspendisse potenti.Lorem ipsum bēdas sit amet, </ p> </ div> 

Visbeidzot mēs esam izveidojuši trīs sleja css izkārtojumu.
Download | Apskatīt Demo

Lūdzu jūsu komentārus ar mums, mēs mīlestība dzirdēt no jums ...

Iesniegts saskaņā ar: css, konsultācijas admin