Css Tooltip walang Paggamit ng Javascript
Sa ako tutorial ako ay magpapakita sa iyo kung paano gumawa ng css Tooltip ng hindi gumagamit ng javascript na ito napaka-simple at epektibong pamamaraan. Umaasa ako na masisiyahan ka sa post na ito.
Narito ang Screenshot
Hakbang: 1 Basic Css Code
; padding : 0 ; } * * * (Margin: 0; padding: 0;) % normal Arial, Helvetica, sans-serif ; } katawan (font: 100% normal Arial, Helvetica, walang-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 ; } # pahina (margin: 0 auto; width: 550px;)
Narito ang magic code
: #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 ; } isang (color: # F00; font-size: 12px;) a: pinapadaan (background: # fff; / * kulay ng background para sa IE * / labor-text: none;) isang. span Tooltip (display: none; padding: 5px 5px; margin-left: 3px; margin-top: 10px; width: 170px; font-size: 12px; line-height: 150%;) isang. Tooltip: pinapadaan span (display: inline; posisyon: absolute; background: # F20F27; border: 1px solid # C30018; color: # fff;)
Hakbang: 2 Basic HTML Structure
> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div id = "page"> <p> Lorem ipsum lumbay umupo amet, consectetur adipiscing elit. Ut viverra dui NEC risus. Sa EU neque isang tortor rhoncus lacinia. Sa interdum Lorem ipsum lumbay umupo amet, consectetur adipiscing elit. Ut viverra dui NEC risus. </ Span> </ a> Lorem ipsum lumbay umupo amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum lumbay umupo amet, </ p> <p> Lorem ipsum lumbay umupo amet, consectetur adipiscing elit. Ut viverra dui NEC risus. Sa EU neque isang tortor rhoncus lacinia. class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sa interdum <a href = "#" klase = "tooltip"> placerat <SPAN> Lorem ipsum lumbay umupo amet, consectetur adipiscing elit. Ut viverra dui NEC risus. </ Span> </ a> Lorem ipsum lumbay umupo amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum lumbay umupo amet, </ p> <p> Lorem ipsum lumbay umupo amet, consectetur adipiscing elit. Ut viverra dui NEC risus. Sa EU neque isang tortor rhoncus lacinia. Sa interdum Lorem ipsum lumbay umupo amet, consectetur adipiscing elit. Ut viverra dui NEC risus. </ Span> </ a> Lorem ipsum lumbay umupo amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum lumbay umupo amet, </ p> </ div>
Sa wakas gumawa kami ng tatlong haligi ng css layout.
I-download | Tingnan ang Demo
Mangyari lamang na ibahagi ang inyong mga puna sa amin, gusto namin ang pag-ibig na marinig mula sa iyo ...
Promote sa Amin
Mga Kaugnay na Akda:
kung ikaw Naging masaya pagbabasa ng artikulong ito, mangyaring tingnan ang iba pang mga kaugnay na artikulo sa ibaba:
Magsumite ng isang Puna