Css Tooltip utan att använda Javascript
I detta i handledningen jag visar dig hur du skapar css verktygstipset utan javascript detta mycket enkel och effektiv teknik. Jag hoppas att ni kommer att njuta av det här inlägget.
Här är Screenshot
Steg: 1 Grundläggande css kod
; padding : 0 ; } * (Margin: 0; padding: 0;) % normal Arial, Helvetica, sans-serif ; } body (font: 100% normal 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;)
Här är den magiska nummer
: #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; / * bakgrundsfärg för IE * / text-decoration: none;) en. verktygstipset span (display: none; padding: 5px 5px; margin-left: 3px; margin-top: 10px; width: 170px; font-size: 12px; line-height: 150%;) en. verktygstipset: hover span (display: inline; position: absolut; background: # F20F27; border: 1px solid # C30018; color: # fff;)
Steg: 2 Grundläggande 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 Diverse risus. I eu neque en tortor lacinia rhoncus. I interdum lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui Diverse 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 Diverse risus. I eu neque en tortor lacinia rhoncus. class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. I interdum <a href = "#" class = "tooltip"> placerat <span> lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui Diverse 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 Diverse risus. I eu neque en tortor lacinia rhoncus. I interdum lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui Diverse risus. </ Span> </ a> lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet, </ p> </ div>
Slutligen har vi skapat tre kolumn css layout.
Download | View Demo
Vänligen dela med dig av dina synpunkter till oss, vi vill gärna höra från dig ...
Promote Us
Liknande artiklar:
Om du hade läst denna artikel kan du kolla in andra relaterade artiklar nedan:
Skicka en kommentar