[jQuery] 2. 앨리먼트에 마우스를 가져다 댔을때의 이벤트. (hover)

해당 강의의 저작권은 Pure Ani's Blog의 주인장 Pure Ani에게 있습니다.

이번에는 마우스를 가져다 댔을때 나오는 효과를 알아보겠습니다.

HTML단.
<div id="abc">abc</div>

jQuery단.
        $("#abc").hover(
// 앨리먼트 id가 abc인것에 마우스를 가져다 댔을때..
            function(){
                alert('in');
// 마우스가 올라온 경우는 in이라는 알림창을 띄운다.
            },
            function(){
                alert('out');
// 마우스가 벗어났을때는 out이라는 알림창을 띄운다.
            }
        );

이전 강의에서 사용했었던 HTML을 그대로 사용하겠습니다.

위의 코드를 가지고 테스트 해보시면 맨처음의 콜백은 마우스가 앨리먼트 위에 있을때, 2번째 앨리먼트는 앨리먼트에서 마우스가 나갔을때 라는걸 알 수 있습니다.

출처 : Pure Ani's Blog