목차
- mouseover() 예제 - 마우스커서가 요소 위에 위치 시 배경색 변경
- mouseover() 정의
- mouseover() 구문
- mouseover() 예제 - cf. mouseenter(), mousemove()
- 이벤트 발생 시 실행 함수 적을 때 주의사항
mouseover() 예제 - 마우스커서가 요소 위에 위치 시 배경색 변경
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseout(function(){
$("p").css("background-color", "lightgray");
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
결과보기
mouseover() 정의
mouseover 이벤트는 마우스커서가 선택 요소 위에 있을 때 발생.
※ mouseover() 메서드는 2가지 작동 가능.
① mouseover 이벤트 촉발.
② mouseover 이벤트 발생 시 실행할 함수 연결.
1. cf.
mouseover() 메서드
: 마우스커서가 선택 요소 및 자식 요소에 들어가면 이벤트 발생.
mouseenter() 메서드
: 마우스커서가 선택 요소에 들어갈 때만 이벤트 발생.
2.
mouseout() 메서드와 주로 함께 사용됨.
mouseover() 구문
mouseover 이벤트 촉발.
$(selector).mouseover()
mouseover 이벤트에 함수 연결.
$(selector).mouseover(function)
[매개변수]
function
선택. mouseover 이벤트 발생 시 실행할 함수 지정.
mouseover() 예제 - cf. mouseenter(), mousemove()
<style>
div {
width: 200px;
height: 100px;
border: 1px solid black;
margin: 10px;
float: left;
padding: 30px;
text-align: center;
background-color: lightgray;
}
h3 {background-color: white; padding:20px;}
span {display;block; color:red;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var x = 0;
var y = 0;
var z = 0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x += 1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y += 1);
});
$("div.move").mousemove(function(){
$(".move span").text(z += 1);
});
});
</script>
<div class="over">
<h3>Mouseover 횟수: <span></span></h3>
</div>
<div class="enter">
<h3>Mouseenter 횟수: <span></span></h3>
</div>
<div class="move">
<h3>Mousemove 횟수: <span></span></h3>
</div>
결과보기
PS.
mouseover 이벤트
: 마우스커서가 div, h3 각각 들어갈 때 이벤트 발생.
mouseenter 이벤트
: 마우스커서가 div 들어갈 때만 이벤트 발생.
mousemove 이벤트
: 마우스커서가 div 위에서 1px 움직일 때마다 이벤트 발생.
이벤트 발생 시 실행 함수 적을 때 주의사항
지역함수 방식으로 실행 함수 기재하면, 정상 작동 X.
※ 지역함수 : 함수(=메서드) 안에 함수를 정의하는 형태.
[방법1]
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.hz {width:100px; height:100px; }
.r {background: red;}
.b {background: blue; display: none;}
</style>
<div class="hz r"></div>
<div class="hz b"></div>
<button onmouseover="r()">red</button>
<button onmouseover="b()">blue</button>
<script>
//$(document).ready(function() { <-- 이 부분 있으면 작동 X
function r(){
$('.hz').css('display','none'); $('.r').css('display','block');
}
function b(){
$('.hz').css('display','none'); $('.b').css('display','block');
}
//}); <-- 이 부분 있으면 작동 X
</script>
결과보기
[방법2]
아래처럼 전역함수 형태로 정의 후, 호출할 때만 함수 안에 넣어야 함.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.hz {width:100px; height:100px; }
.r {background: red;}
.b {background: blue; display: none;}
</style>
<div class="hz r"></div>
<div class="hz b"></div>
<button onmouseover="r()">red</button>
<button onmouseover="b()">blue</button>
<script>
$(document).ready(function() {
r(); //굳이 부르겠다면 이렇게
b();
});
function r(){
$('.hz').css('display','none'); $('.r').css('display','block');
}
function b(){
$('.hz').css('display','none'); $('.b').css('display','block');
}
</script>
결과보기
균이 님, 플래토 님 (190918) https://sir.kr/qa/323817
