.mousemover(), .mouseout()
마우스 커서가 노드에 들어 오거나 노드 밖으로 나가면 발생하는 이벤트. 자식 노드도 독립적인 노드로 처리된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mouse over mouse out</title>
<style>
#parent {
width: 300px;
height: 300px;
position: absolute;
left: 200px;
top: 100px;
background-color: red;
}
#child {
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
background-color: white;
}
</style>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
var $info = $("#info");
var $parent = $("#parent");
var $child = $("#child");
var count = 0;
// parent 영역으로 들어올 때 발생하는 이벤트
$parent.mouseover(function (e) {
count++;
$info.html($info.html() + "<br>" + count + "." + e.target.id + ".over");
});
// parent 영역에서 밖으로 나갈 때 발생하는 이벤트
$parent.mouseout(function (e) {
count++;
$info.html($info.html() + "<br>" + count + "." + e.target.id + ".out");
});
});
</script>
</head>
<body>
<div id="info">
여기에 이벤트 정보 출력
</div>
<div id="parent">
parent
<div id="child">
</div>
</div>
</body>
</html>
이번에는 animate를 이용하여 mouseover()/ mouseout()을 알아보자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mouse over mouse out</title>
<style>
#parent {
width: 300px;
height: 300px;
position: absolute;
left: 200px;
top: 100px;
background-color: red;
}
#child {
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
background-color: white;
}
#child div {
height: 100px;
text-align: center;
line-height: 100px;
align-content: center;
}
#child div.over {
background-color: yellow;
}
</style>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
var $info = $("#info");
var $parent = $("#parent");
var $child = $("#child");
var count = 0;
// parent 영역으로 들어올 때 발생하는 이벤트
$parent.mouseover(function (e) {
count++;
$info.html($info.html() + "<br>" + count + "." + e.target.id + ".over");
$child.animate({top : -100}, 300);
});
// parent 영역에서 밖으로 나갈 때 발생하는 이벤트
$parent.mouseout(function (e) {
count++;
$info.html($info.html() + "<br>" + count + "." + e.target.id + ".out");
$child.animate({top: 100}, 300);
});
});
</script>
</head>
<body>
<div id="info">
여기에 이벤트 정보 출력
</div>
<div id="parent">
parent
<div id="child">
<div></div>
</div>
</div>
</body>
</html>
animate를 통해 mouseover와 mouseout을 알아봤다.
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] offsetParent 사용하기 (0) | 2020.08.05 |
|---|---|
| [Javascript] 마우스엔터, 마우스리브 (0) | 2020.08.05 |
| [Javascript] 사용자 정의 이벤트 (0) | 2020.08.05 |
| [Javascript] 버블링 기초 - 2 (0) | 2020.08.05 |
| [Javascript] 버블링 기초 - 1 (0) | 2020.08.05 |
