728x90
mouseeter() 이벤트 메서드는 대상 요소의 경계 범위에 마우스 포인터가 들어오면 이벤트를 발생시킨다.
mouseleave() 이벤트 메서드는 대상 요소의 경계 범위에서 마우스 포인터가 완전히 벗어나면 이벤트를 발생시킨다.
참고로,
mouseover는 대상 요소에 마우스 포인터가 올라가면 발생하고,
mouseenter는 이벤트 대상이 포함된 범위에 마우스 포인터가 들어오면 발생하는 이벤트다.
마찬가지로,
mouseout은 대상 요소에서 마우스 포인터가 벗어나면 발생하는 이벤트고
mouseleave는 대상이 포함된 범위에서 마우스 포인터가 완전히 벗어나면 발생하는 이벤트다.
* 예제
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> 이벤트 </title> <script src="js/jquery.js"></script> <script> $(function( ) { $("#box_1").on("mouseout", function(){ $("#box_1") .css({"background-color":"yellow"}); }); $("#box_2").on("mouseleave", function(){ $("#box_2") .css({"background-color":"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> |
'내마음대로만들어보자 > JS' 카테고리의 다른 글
| scroll() 이벤트 메서드 (0) | 2021.08.23 |
|---|---|
| mousemove() 메서드 (0) | 2021.08.23 |
| mouseover() / mouseout() / hover() (0) | 2021.08.22 |
| 클릭 이벤트 차단하기 - preventDefault() (0) | 2021.08.22 |
| 마우스 이벤트 - click() / dbclick() 메서드 (0) | 2021.08.22 |