728x90
mouseover() 이벤트 메서드는 선택한 요소에 마우스 포인터를 올릴 때 마다 이벤트를 발생시키거나 선택한 요소에 mouseover이벤트를 강제로 발생시킨다.
mouseout() 이벤트 메서드는 선택한 요소에서 마우스 포인터가 벗어날 때마다 이벤트를 발생시키거나 강제로 이벤트를 발생시킨다.
hover() 이벤트 메서드는 선택한 요소에 마우스 포인터가 올라갈때와 선탁한 요소에서 벗어날때 각각 이벤트를 발생시킨다.
* 예제
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> 이벤트 </title> <script src="js/jquery.js"></script> <script> $(function( ) { $(".btn1").on({ "mouseover" : function( ) { //버튼에 마우스 포인터를 올리면 class값이 "txt1"인 요소의 배경색을 노란색으로 변경한다. $(".txt1") .css({"background-color":"yellow"}); }, "mouseout" : function( ) { // 버튼에서 마우스 포인터가 벗어나면 배경색을 다시 제거한다. $(".txt1") .css({"background":"none"}); } }); $(".btn2").hover(function( ) { $(".txt2") .css({"background-color":"aqua"}); }, function(){ $(".txt2") .css({"background":"none"}); }); }); </script> </head> <body> <p><button class="btn1">Mouse Over/Mouse Out</button></p> <p class="txt1">내용1</p> <p><button class="btn2">Hover</button></p> <p class="txt2">내용2</p> </body> </html> |
'내마음대로만들어보자 > JS' 카테고리의 다른 글
| mousemove() 메서드 (0) | 2021.08.23 |
|---|---|
| mouseeter() / mouseleave()메서드 (0) | 2021.08.23 |
| 클릭 이벤트 차단하기 - preventDefault() (0) | 2021.08.22 |
| 마우스 이벤트 - click() / dbclick() 메서드 (0) | 2021.08.22 |
| 로딩 이벤트 - ready() / load() 메서드 (0) | 2021.08.22 |