Css Tooltip ilma JavaScripti
Selles i tutorial Ma näitan sulle, kuidas luua CSS Tooltip ilma JavaScripti see väga lihtne ja tõhus meetod. Loodan, et meeldib see postitus.
Siin on pilt

Samm: 1 Peamised Css Kood
; padding : 0 ; } * (Margin: 0; padding: 0;) % normal Arial, Helvetica, sans-serif ; } body (font: 100% normaalne 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;)
Siin on maagiline kood
: #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 ; } (color: # F00; font-size: 12px;) a: hover (background: # fff; / * tausta värv IE * / text-decoration: none;). Tooltip span (kuva: none; padding: 5px 5px; margin-left: 3px; margin-top: 10px; width: 170px; font-size: 12px; line-height: 150%;). Tooltip: hover span (display: inline; position: absolute; background: # F20F27; border: 1px solid # C30018; color: # fff;)
Samm: 2 Basic HTML struktuur
> <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. ELi 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. ELi 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. ELi 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>
Lõpuks oleme loonud kolm veergu CSS kujundus.
Download | Vaata demo
Palun jagage oma kommentaare siin, me tahame teada, mis te ...
Seotud artiklid:
Kui teile meeldis lugemine see artikkel, palun vaadake teisi seotud artikleid järgmiselt:




















































Saada kommentaar