.Net Project/Jquery 1.3.2

17장 JQuery 마우스 오버와 아웃 처리 ( Mouse Hover() )

Magic_kit 2009. 11. 6. 14:35
반응형
 MouseHover.htm


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Mouse Hover() 로 마우스 오버와 아웃을 동시 처리 </title>
    <style type="text/css">
        .redColor { color:Red;}
        .hover { cursor:hand; background-color:Yellow;}
       
       
    </style>
    <script src="../jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
         //$('table tr:gt(0) 필터 메서드 사용하여 제목에는 해제하여 주고자 할경우 사용
            $('table tr').hover(function () { $(this).addClass('hover'); },
                 function () { $(this).removeClass('hover'); });

        });
    </script>
</head>
<body>
<div>
<table border="2" align="center" Height="150px" >
    <tr>
        <td>글 번호</td>
        <td>제목</td>
        <td>작성자</td>
        <td>작성날짜</td>
        <td>IP주소</td>
       
    </tr>

    <tr>
        <td>1</td>
        <td>안녕하세요</td>
        <td>김용원</td>
        <td>2009-11-06</td>
        <td>192.168.10.17</td>
    </tr>
   
    <tr>
        <td>2</td>
        <td>안녕하세요 만나서 반가워요</td>
        <td>주국원</td>
        <td>2009-11-05</td>
        <td>192.168.10.17</td>
    </tr>

    <tr>
        <td>3</td>
        <td>안녕하세요 다음에 또 만나요</td>
        <td>이둔철</td>
        <td>2009-11-08</td>
        <td>192.168.10.17</td>
    </tr>
   
    <tr>
        <td>4</td>
        <td>안녕하세요 다음에 또 만나요</td>
        <td>Agent</td>
        <td>2009-11-08</td>
        <td>192.168.10.18</td>
    </tr>   
</table>
    <div align="center" >
        <input id="btnList" type="button" value="목록" />
        <input id="btnWrite" type="button" value="글쓰기" />
    </div>
</div>
</body>
</html>






반응형