JQuery를 사용한 MouseOver 시 Div 창 띄워주기. ^O^

ASP.NET의 경우 runat="server"을 사용할경우 ID로의 접근이
좀 불편하기때문에(아직 스킬이 부족한관계로) 임시방편 삼아
class를 사용해 속성을 추가해 주었습니다.

jquery-1.4.2.min.js

 

[JQuery]

<script src="../-1.4.2.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        $("#ddd").mouseover(function(event) {
            $(".hoverpopup").css("visibility", "Visible");
            $(".hoverpopup").css("top", event.target.offsetTop - 15);
            $(".hoverpopup").css("left", event.target.offsetLeft + 30);
            $(".hoverpopup").css("display", "block");                   
})
});
</script>
<div id="ddd">
마우스를 위에 올려주세요.
</div>
<div id="hoverpopup" class="hoverpopup" runat="server" style="border:solid 1px blue; visibility: hidden; position: absolute;">
    /////////////  내용  ///////////
</div>