지난 시간에 addClass()와 removeClass()를 배웠으니, 이제는 Event를 구성하겠습니다.
먼저 소스를 보시죠.
<body> 태그안에 내용을 넣었습니다. 그리고
먼저 <a>태그에 Hover()를 사용하였습니다. hover() 안에 두가지 함수를 넣어주시면, In hover, out hover로 나뉜닙니다.
그리고 나서 두가지 함수를 추가한다음 color 옵션을 넣었습니다.
확인해보겠습니다.
지난번에 사용한 addClass와 removeClass()와 연관되어 사용됩니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>RintIanTta JQuery Lesson 1</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <style type="text/css"> .whenAHover { color:Red; background-color:Orange; } </style> <script type="text/javascript"> $(document).ready(function () { $("a").hover(aHoverIn, aHoverOut); });
function aHoverIn(){ $(this).addClass("whenAHover"); } function aHoverOut(){ $(this).removeClass("whenAHover"); }
</script> </head> <body> <ul> <li><a href="#">Allips</a></li> <li><a href="#">RintIanTta</a></li> <li><a href="#">Silverlight</a></li> <li><a href="#">Windows Phone</a></li> <li><a href="#">Web Development</a></li> </ul> </body> </html> |
결과.
addClass()나 removeClass() 외에도 toggleClass()라는 것도 있으니 사용해보시기 바랍니다.
'Skills > Web' 카테고리의 다른 글
| Query Basic 8강 - Toggle() (0) | 2014.01.13 |
|---|---|
| JQuery Basic 7강 - show() & hide() (0) | 2014.01.13 |
| jQuery Basic 5강 - addClass() & removeClass() (0) | 2014.01.13 |
| jQuery Basic 4강 - 변수 & 연속사용 (0) | 2014.01.13 |
| jQuery Basic 3강 - Selector (0) | 2014.01.13 |
