목차
mouseout() 예제 - 마우스커서가 요소 이탈 시 배경색 변경.
mouseout() 정의
mouseout() 구문
mouseout() 예제 - cf. mouseleave()
mouseout() 예제 - 마우스커서가 요소 이탈 시 배경색 변경.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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>
결과보기
mouseout() 정의
mouseout 이벤트는 마우스커서가 요소 이탈 시 발생.
※ mouseout() 메서드는 아래 2가지 작동 가능.
① 요소에 mouseout 이벤트 촉발.
② mouseout 이벤트 발생 시 실행할 함수 연결.
cf.
mouseout 이벤트 : 마우스커스가 해당 요소와 자식 요소 각각 이탈 시 이벤트 발생.
mouseleave 이벤트
: 마우스커서가 해당 요소 이탈할 때마 이벤트 발생.
mouseout() 구문
mouseout 이벤트 촉발.
$(selector ).mouseout()
mousout 이벤트에 함수 연결.
$(selector ).mouseout(function )
[매개변수]
function
선택. mouseout 이벤트 발생 시 실행할 함수 지정.
mouseout() 예제 - cf. mouseleave()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
x = 0;
y = 0;
$(document).ready(function(){
$("div.over").mouseout (function(){
$(".over span").text(x += 1);
});
$("div.enter").mouseleave (function(){
$(".enter span").text(y += 1);
});
});
</script>
<style>
div {background-color:silver;padding:20px;width:250px}
h3 {background:white; padding:20px;}
span {color:red;}
</style>
<div class="over" style="float:left">
<h3>Mouseout 횟수 : <span></span></h3>
</div>
<div class="enter" style="float:right">
<h3>Mouseleave 횟수 : <span></span></h3>
</div>
결과보기
PS.
mouseout 이벤트
: 마우스커서가 div, h3 각각 이탈 시 이벤트 발생.
mouseleave 이벤트
: 마우스커서가 div 이탈 시에만 이벤트 말바생.
주소 복사
랜덤 이동