jQuery 롤오버

jQuery 롤오버

 

- $.hover(mouseover, mouseout);

- 예제

$('#btn_ok').hover(

    function() {

        $(this).addClass('btn_on');

    }

,   function() {

        $(this).removeClass('btn_on');

    }

);

 

간단하다. 버튼 마우스 온 오버 따위.. 심화학습으로 tr 마우스 온 오버를 해보자.

 

$('#tbl_list tr:gt(0)').hover(

    function() {

        $('#tbl tr').removeClass('tr_on');    // 일단 tr_on(롤오버) 클래스 삭제

        $(this).addClass('tr_on');             // 마우스 올라온 녀석 클래스 삽입

    }

,   function() {

        $(this).removeClass('tr_on');

    }

);

 

참 쉽다.. 늘 말하지만 jQuery는 쉽다.. 크하~ 어떻게 짱구를 굴리느냐에 따라 정말 쉬워진다.!! 굳굳

 

- :gt가 뭔지 모르는 사람을 위한 추가 설명

gt(index) : index 보다 큰것. 그러니까 첫 라인은 보통 <tr><th>번호</th><th>제목<th></tr> 이러니까 이 라인 다음을 말한다.

lt(index) : GT는 Greater Then 정도로 생각하고 있고(정확한 의미는 모르겠다 그냥 그렇다고..) LT는 Lesser Then 아닐까?.. 뭐 찍은거...

[출처] jQuery 롤오버|작성자 Xeroad