V tem i Tutorial i vam bo pokazal, kako ustvariti css tooltip brez javascript to zelo enostavno in učinkovito metodo. Upam, da boste uživali to delovno mesto.

Tu je zaslon

Korak: 1. Osnovne CSS zakonik

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

Tukaj je čarobna številka

  : #F00 ; font-size : 12px ; } a (color: # F00; font-size: 12px;) 

  a: hover (  
  ; /*background color for IE*/ background: # FFF; / * barva ozadja za IE * /  
  Text-decoration: none;  
  ) 
 
  A. Tooltip span (  
  Izpis: none; 
  ; Padding: 5px 5px; 
  Margin-left: 3px;  
  Margin-top: 10px;  
  Width: 170px; 
  Font-size: 12px; 
  Line-višina: 150%; 
  )  
 
   span { A. Tooltip: hover span (  
  Izpis: inline; 
  Stališče: absolutno; 
  ; background: # F20F27; 
  #C30018 ; Border: 1px solid # C30018; 
  ; color: # FFF; 
  ) 

Korak: 2 Osnovni HTML Struktura

 > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div id = "page"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra znak nec risus.  V eu neque a tortor lacinia rhoncus.  V interdum Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra znak 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 znak nec risus.  V eu neque a tortor lacinia rhoncus.  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. V interdum <a href = "#" razred = "tooltip"> placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra znak 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 znak nec risus.  V eu neque a tortor lacinia rhoncus.  V interdum Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra znak nec risus. </ Span> </ a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Suspendisse potenti.Lorem ipsum dolor sit amet, </ p> </ div> 

Končno smo ustvarili tri kolone css postavitev.
Download | Prikaži Demo

Prosimo, delite svoje pripombe z nami, mi radi slišali od vas ...

Pila pod: CSS, Tutorials z admin