jQuery - mouseenter / movesover 차이점

mouseenter / movesover 차이점

MouseOver/Out : 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 해당 자식요소의 영역까지 포함됨
MouseEnter/Leave : 지정된 태그 요소(혹은 자신)의 영역에만 해당되며, 만약 자식요소가 있다면 해당 자식요소의 영역은 제외됨

예시

1번 div의 경우는 회색 영역에만 영향을 줍니다.
1번의 경우는 마우스를 우선 회색 div 범위내에 올리면 p태그로 감싸여 있는 글씨 부분의 배경이 노랑색으로 변하는걸 확인하실 수 있습니다.
그리고 다시 연두색 영역인 p태그 영역으로 마우스를 가져다 놓으면 최종적으로 하양색 선이 생기는걸 확인하실 수 있습니다.
결론은 회색 div 영역에만 마우스 이벤트가 발생된다는것을 확인할 수 있습니다.

2번의 경우는 우선 마우스를 올리면 글씨 부분의 배경이 바뀌는게 1번과 똑같습니다.
그러나 글씨 부분까지 마우스가 들어가도 변하지 않습니다.
2번의 div를 완전히 빠져나와야 마우스가 나갔을 때의 이벤트가 실행됩니다.
결론은 p태그까지도 영향을 끼친다는 것을 확인할 수 있습니다.

결론은 자식요소까지 영역을 넓히려면 mouseenter/mouseleave 이(가) 아닌,
mouseover/out 을(를) 사용해야 한다는 것을 알 수 있습니다.
CSS에서는 hover와 비슷 한 역할 같습니다.