[jQuery] 2. 앨리먼트에 마우스를 가져다 댔을때의 이벤트. (hover) 강의이야기 | Posted on 2012. 2. 5. 16:00
해당 강의의 저작권은 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
이번에는 마우스를 가져다 댔을때 나오는 효과를 알아보겠습니다.
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