hover()로 마우스오버와 아웃을 동시 처리
.NET프로그래밍/jQuery 1.3.2 2009. 11. 6. 12:09 |[Hover.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>hover()로 마우스오버와 아웃을 동시 처리</title>
<style type="text/css">
.hover { cursor:hand; background-color:Yellow; }
</style>
<script src="js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('table tr:gt(0)').hover(
function() { $(this).addClass('hover'); },
function() { $(this).removeClass('hover'); }
);
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>제목</td>
</tr>
<tr>
<td>ASP.NET</td>
</tr>
<tr>
<td>ASP.NET</td>
</tr>
</table>
</body>
</html>
-------------------------------------------------------------------------------------
[실행결과]
--> 아래그림에서 테이블의 맨 위에 있는 첫 번째 행("제목"으로 텍스트가 쓰여져 있는 행)을 '마우스커서'로 올리면 아무런 반응이 없지만, 그아래있는 2개의 행에 각각 마우스커서를 올려보면 아래 그림과 같이 배경색이 노란색으로 변하고, 다시 마우스커서를 다른 곳으로 옮기면 노란색에서 원래의 무(흰)색으로 돌아온다.
'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글
| css()메서드를 사용하여 폰트 늘리기 및 줄이기 (0) | 2009.11.09 |
|---|---|
| one()메서드로 한번만 실행 (0) | 2009.11.06 |
| toggleClass() 메서드로 CSS 클래스에 대한 토글링 (0) | 2009.11.06 |
| toggle() 메서드로 토글링 (0) | 2009.11.06 |
| slice() 메서드로 지정된 개체만 가져오기 (0) | 2009.11.06 |