[CSS] 풍선도움말(팝업) > 기술자료

• 목록

CSS를 활용해서 도움말 만드는 방법입니다

샘플 : http://happyjung.com/demo/css/help_tip.html

<style type="text/css">
a.help_info{
    position:relative; /*this is the key*/
    z-index:24; 
    color:#000;
    text-decoration:underline}

a.help_info:hover{z-index:25; background-color:#ff0}

a.help_info span{display: none}

a.help_info:hover span { /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#fff; color:#000;
    text-align: center;
    width:300px;
}
</style>

안녕하세요.<br>
저는 <a class="help_info" href="#">해피정닷컴<span>^주1. 홈페이지를 만들고 관리하는 회사</span></a> 입니다.


참고자료
http://psacake.com/web/jl.asp