jquery - mouseout과 mouseleave 차이

• mouseout는 개별 요소에서 벗어났을 때 발생
• mouseleave는 전체 요소에서 벗어났을 때 발생

<div id="box_1">
  <p><a href='#'>내용1</a></p>
  <p><a href='#'>내용2</a></p>
  <p><a href='#'>내용3</a></p>
</div>

<div id="box_2">
  <p><a href='#'>내용1</a></p>
  <p><a href='#'>내용2</a></p>
  <p><a href='#'>내용3</a></p>
</div>

-------------------------------------------

$(function(){
    $("#box_1").on("mouseout", function(){
        $("#box_1").css({"background-color":"red"});
    });

    $("#box_2").on("mouseleave", function(){
        $("#box_2").css({"background-color":"blue"});
    });
});


설명
mouseout의 경우에는 개별 요소에 있다가 다른 요소로 가거나 벗어나면 색깔이 바뀐다

mouseleave의 경우에는 div가 묶여있는 요소 안에선 어느곳으로 움직여도 변화가 없으나
그 전체 묶음에서 벗어나면 바뀐다.