jquery .hover (마우스오버와 마우스아웃)

jquery를 사용하여, List의 마우스를 올렸을 때  해당 줄에 배경색을 줘서 알아보기 쉽게 해보자!

테이블(List)의 4열의 background-color가 없다면 Script1번과 같이 하면 되지만
4열의 background-color를 다르게 주기위해서 Script2번과 같은 방법을 사용하였다.

Script1

<style type="text/css">
    .hover{cursor:pointer; background-color:#fdf7df;}
< /style>
< script type="text/javascript">
    $(document).ready(function () {
        $('table tr:gt(0)').hover(
        function () { $(this).addClass('hover'); },
        function () { $(this).removeClass('hover'); }
    );
    });
< /script>

Script2
.hover 는 해당 element에 마우스가 올라갔을 때와 element에서 마우스가 벚어나는 순간에 함수를 실행한다.

.hover(OverFuntion 위치,OutFunction 위치)
커서가 올라갔을 때 OverFuntion이 커서가 벗어났을 때 OutFuntion이 실행된다.
OverFuntion
OverFuntion에서는 우선 graytd(background-color 적용) calss를 모두 지우고, hover class를 실행한다.
그러면 원하는 줄에는 hover가 적용되어 해당줄에 마우스오버가 되면 background-color가 적용된다.
하지만, 이대로 마치면 한번 적용되고 마우스아웃 된 후로는 모든 줄에 graytd까지 지워진 상태기때문에 마우스아웃에서
아래와 같은 함수를 처리하는 것이다.
OutFunction
마우스아웃함수에서는 마우스오버에서 실행되 남아있던 hover class를 지우고, 다시 graytd를 적용해서 처음상태로 만들어준다.

<style type="text/css">

.hover{cursor:pointerl background-color:#fdf7df;}
.graytd{background-color:#fcfcfc;}

</style>
< script type="text/javascript">
    $(document).ready(function () {
        $('.tblList tr').hover(
        function () {
            $(this).children().removeClass('graytd');
            $(this).addClass('hover');
        },
        function () {
            $(this).removeClass('hover');
            $(this).children(':even').addClass('graytd');
        }
    );
    });
< /script>

    <table class="tblList" style=" font-size:15px;">
    <tr>
        <th>날짜</th>
        <th>수입</th>
        <th>지출</th>
        <th>잔액</th>
    </tr>
    <tr>
        <td align="center" class="graytd">2011-07-08(수)</td>
        <td align="right" style="padding-right:15px;">0</td>
        <td align="right" class="graytd" style="padding-right:15px;">0</td>
        <td align="right" style="padding-right:15px;">0</td>
    </tr>
    </table>