[Event] JQ - mouseleave() 메서드 ★ - mouseleave 이벤트발생/함수실행 (= mouseleave 메서드 = 마우스리브 메서드) ※ 마우스커서 이탈 시, 떠날 때 실행.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 

<script>

$(document).ready(function(){

    $("#hz").mouseleave(function(){

        alert("Homzzang.com"); 

    });

});

</script>

<p id="hz">홈짱닷컴 주소 보기.</p>

결과보기

 

<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 이탈 시에만 이벤트 발생.