반응형
mouseenter와 mouseleave를 동시에 쓰는 함수 hover()
toggle 여러 이벤트 핸들러가 번갈어가며 수행시켜주는 형태로 연결해준다.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
.test {
background: black;
color:white
}
</style>
<script type ="text/javascript src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type ="text/javascript>
$(document).ready(function(){
$('h1').hover(function() { //mouseenter에 해당하는 이벤트핸들러
$(this).addClass('test');
}, function() { //mouseleave에 해당하는 이벤트 핸들러
$(this).removeClass('test');
});
});
</script>
</head>
<body>
header-1
header-2
header-3
</body>
</html>
반응형
'wEb > javascript' 카테고리의 다른 글
| CommonJS(커먼JS) (0) | 2018.12.19 |
|---|---|
| jquery .css 변수 사용 (0) | 2013.09.29 |
| keydown(), keyup(), keypress() (0) | 2013.09.28 |
| .live() 와 .bind() (0) | 2013.09.28 |
| preventDefault(), stopPropagation(), return false; (0) | 2013.09.28 |
| $(document).ready (0) | 2013.08.16 |
| jQuery API .nextAll() test (0) | 2013.06.07 |
| 제이쿼리 트래버싱_jquery traversing API (0) | 2013.06.06 |
| 자바스크립트 배열작성 방식 3가지 (0) | 2013.03.25 |
| jquery를 이용한 필요없는 셀지우기 (0) | 2012.04.20 |