<!DOCTYPE HTML > | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>jquery</title> | |
| <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| $("span.tooltip").css({ | |
| display : "none", | |
| opacity : "0.5", | |
| position: "absolute" | |
| }); | |
| $("a").mouseover(function(){ | |
| $("span.tooltip").fadeIn(); | |
| }).mouseout(function(){ | |
| $("span.tooltip").fadeOut(); | |
| }).mousemove(function(e){ | |
| $("span.tooltip").css({ | |
| "top":e.pageY +10+"px", | |
| "left":e.pageX +10+"px" | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <style type="text/css"> | |
| body { | |
| background: #777; | |
| color: white; | |
| } | |
| a { | |
| color: #00CCFF; | |
| } | |
| h1 { | |
| width: 80%; | |
| margin: 10px auto; | |
| } | |
| p { | |
| margin: 10px 10%; | |
| } | |
| span.tooltip { | |
| line-height: 1.5; | |
| color: white; | |
| width: 200px; | |
| background: #FF9900; | |
| border: 2px solid white; | |
| padding: 1em; | |
| font-size:10pt; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>tooltip sample</h1> | |
| <p> | |
| <a | |
| href="http://ascii.jp/elem/000/000/438/438206/">tooltip sample</a> <span | |
| class="tooltip">이것은ASCII.jp<br /> <strong>Web제작현장에서 | |
| 사용한 jQuery<br />UI디자인 입문 | |
| </strong><br />의 샘플 프로그램입니다. | |
| </span> | |
| </body> | |
| </html> |
'2020년도 이전 > [WebSig] JQuery' 카테고리의 다른 글
| 미션2 - 1초에 하나씩 1부터 숫자를 증가시키며 #panel에 추가 시켜 주세요. 단, 폰트 크기( 10px~ 50px)와 색은 랜덤으로 설정해주세요. (0) | 2013.07.31 |
|---|---|
| JQuery 기초 (0) | 2013.07.29 |
| 미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요. 단, 이미지는 9개가 있습니다. 9개까지 출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요. (0) | 2013.07.29 |
| #img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요. (0) | 2013.07.29 |
| #image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요. (0) | 2013.07.29 |