본문 바로가기
개발/jquery

mouseover(fn)과 mouseout(fn) 대체하는 hover(fn, fn)

by 허허 그림 2014. 4. 5.
728x90

mouseover(fn) 와 mouseout(fn)을 번갈아 사용하다보면 본의 아니게 오류를 일으킬 수 있는 코드를 작성할 수 있다.

그래서 jquery에는 hover(fn, fn)을 제공한다.


hover(fn, fn)

    - 첫번째 인자(fn) : 함수 인자로서 마우스가 해당 엘리먼트의 위를 지나갈때 실행된다.

    - 두번째 인자(fn) : 함수 인자로서 마우스가 해당 엘리먼트를 벗어날때 실행된다.

    - 예)

        // 이 코드는 jQuery가 구현한 hover() 함수를 시연한다. 두 함수를 정의해야 한다.

        // 하나는 특정 엘리먼트 위로 마우스가 지나갈 때 동작하는 함수이며,

       // 다른 하나는 엘리먼트에서 마우스가 벗어날 때 동작하는 함수다.

        // 이 예제에서, 테이블의 각 행은 마우스가 위로 지나갈 때 붉은색 배경으로 변하며,

        // 마우스가 벗어날 때 흰색 배경으로 변한다.

       $("tr").hover(function(){

$(this).css("background","#0000ff");

},

function(){

$(this).css("background","#ffffff");

});

300x250

댓글