jQuery 다중 이벤트
2021. 12. 7. 12:02ㆍStudy/jQuery
| mouseenter | 마우스가 올라갔을 때 |
| mouseleave | 마우스가 벗어났을 때 |
addClass(), removeClass()
마우스가 올라가면 .reverse클래스 추가, 마우스가 벗어나면 .reverse 클래스 삭제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q&A</title>
<style>
*{margin: 0; padding: 0;}
body{font-family:'Spoqa Han Sans Neo'; font-size: 16px; color:#333; line-height:1.6;}
a{color:inherit; text-decoration:none;}
img{vertical-align:top;}
.reverse {background: Black; color: White;}
</style>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
// $('h2').on('mouseenter', function(){
// $(this).addClass('reverse');
// });
// $('h2').on('mouseleave', function(){
// $(this).removeClass('reverse');
// });
// 다중 이벤트 처리
$('h2').on({
mouseenter: function () { $(this).addClass('reverse'); },
mouseleave: function () { $(this).removeClass('reverse'); }
});
});
</script>
</head>
<body>
<h2>Header-0</h2>
<h2>Header-1</h2>
<h2>Header-2</h2>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery toogle 더보기 (0) | 2021.12.07 |
|---|---|
| jQuery attr() 속성변경 (0) | 2021.12.07 |
| jQuery toggle(), hover() (0) | 2021.12.07 |
| jQuery EVENT bind(), on(), click() (0) | 2021.12.07 |
| jQuery 기본문법 (0) | 2021.12.06 |
