마우스 오버시 레이어 출력~

[신디게이트]

본문

마우스 오버시 레이어 보이게 하는 팁입니다.

버튼 하나에 레이어 하나 이렇게만 만들다가
지금 작업중인 사이트는 버튼이랑 설명레이어가 여러개가 되길래 만들어봤습니다.

<style type="text/css">
.help_btn{cursor:pointer;}
#help_div_0{display:none; position:absolute; left:0px; top:-210px;}
#help_div_1{display:none; position:absolute; left:80px; top:-210px;}
#help_div_2{display:none; position:absolute; left:185px; top:-210px;}
</style>

<div style="position:relative">
    <input type="radio">라디오1 <img src="img/icon_help.gif" class="help_btn">
    <input type="radio">라디오2 <img src="img/icon_help.gif" class="help_btn">
    <input type="radio">라디오3 <img src="img/icon_help.gif" class="help_btn">
   
    <div id="help_div_0">설명 1</div>
    <div id="help_div_1">설명 2</div>
    <div id="help_div_2">설명 3</div>
</div>

<script>
$(".help_btn").each(function(index) {
    $(this).mouseover(function() {
        $("#help_div_" + index).css("display", "block");
    });
    $(this).mouseout(function() {
        $("#help_div_" + index).css("display", "none");
    });
});
</script>

더 응용하면 레이어 위치까지도 제어할 수 있을 듯 하네요~

파이어폭스, ie8 만 테스트해봤습니다.