mouseenter() / mouseleave() 이벤트 메서드
mouseenter() : 대상 요소의 경계 범위에 마우스 포인터가 들어오면 이벤트 발생
mouseleave() : 대상 요소의 경계 범위에서 마우스 포인터가 완전히 벗어나면 이벤트 발생
mouseover(), mouseout() 와 mouseenter(), mouseleave() 의 차이점
부모와 자식 요소의 구조에서 부모 요소에게 mouseover(), mouseout() 이벤트를 적용하면 자식 요소에도 동일한 이벤트가 발생하는 문제가 생김.
반면 mouseenter(), mouseleave()는 자식 요소에게 이벤트의 영향을 주지 않음.
mouseleave() : 자식 영역에 들어가 요소를 빠져 나갈때는 감지되지 않음
mouseout() : 자식 영역에 들어가 요소를 빠져 나갈때도 감지
기본형:
1) mouseenter 이벤트 등록
$("이벤트 대상 선택").mouseenter(function() {
자바 스크립트 코드;
});
$(document).on("mouseenter", function() {
자바 스크립트 코드;
});
2) mouseenter 이벤트 강제 발생
$("이벤트 대상 선택").mouseenter()
1) mouseleave 이벤트 등록
$("이벤트 대상 선택").mouseleave(function() { 자바 스크립트 코드;});
$(document).on("mouseleave", function() { 자바 스크립트 코드;});
2) mouseleave 이벤트 강제 발생
$("이벤트 대상 선택").mouseleave()
<script>
$(function() {
$('#box_1').on('mouseout', function() {
$('#box_1').css({backgroundColor: 'yellow'});
});
$('#box_2').on('mouseleave', function() {
$('#box_2').css({backgroundColor: 'pink'});
});
});
</script>
</head>
<body>
<h1>mouseout</h1>
<div id="box_1">
<p><a href="#">내용1</a></p>
<p><a href="#">내용2</a></p>
<p><a href="#">내용3</a></p>
</div>
<h1>mouseleave</h1>
<div id="box_2">
<p><a href="#">내용4</a></p>
<p><a href="#">내용5</a></p>
<p><a href="#">내용6</a></p>
</div>
</body>
</html>
