마우스 포인터를 올릴때 이벤트 발생시키기
저번강좌에서는 click를 하면 어떠한 이벤트가 발생했죠. 이번에는 마우스 포인터를 올리면 생기는것을 해봅시다.
mouseenter();
지난번 강좌에서의 click()를 mouseenter()로 변경만 해주면 됩니다.
$('.class_name').mouseenter();
마우스 포인터가 대상체를 떠날때 이벤트 발생시키기
mouseleave();
마우스 포인터가 대상체에서 떠날때 어떠한 이벨트가 발생 시키기 위해서는 mouseleave();를 사용합니다.
$('.class_name').mouseleave();
활용 방법
다음의 노란색 동그라미에 마우스 포인터를 올리고 내리고를 해봅시다.
노란색 원에 마우스 포인터를 올리고 내려 보세요.
마우스 포인터를 올리면 어떠한 문구가 나오고 떠나면 어떠한 문구가 나오도록 하는 예제 입니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>제이쿼리</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script> <script type="text/javascript"> $(function(){ $('.yellow_circle').mouseenter(function(){ $('.yellow_circle_word').text('마우스 포인터가 노란색원 안에 있습니다. '); }); $('.yellow_circle').mouseleave(function(){ $('.yellow_circle_word').text('마우스 포인터가 노란색원을 떠났습니다. '); }); }); </script> </head> <body> <div class="yellow_circle" style="width:40px;height:40px;border-radius:20px;background:yellow"></div> <p class="yellow_circle_word">노란색 원에 마우스 포인터를 올리고 내려 보세요.</p> </body> </html>
여기에서 처음 보는 text()가 나왔는데요. 이 함수는 텍스트문구를 변경하는 또는 취득하는 함수 입니다. ^-^
어려워 하지 마시고요 이 강좌에서는 mouseenter(), mouseleave()에 대한 기능만 봐주시면 됩니다.
mouseenter()과 mouseleave()를 함께 사용하는 hover()도 있습니다.
hover
How to use hover()
$('.class_Name').hover(mouseenter()의 기능,mouseleave()의 기능);
예문
$('.class_Name').hover(function(){ $('.class_Name').css('border','5px solid blue'); }, function(){ $('.class_Name').css('border','5px solid red'); } );
위와 같이 사용할 수 있는데요.
그럼 실제 만들어 봅시다.
HTML
<div class="hover1"></div>
CSS
.hover1{width:100px; height:50px; background:yellow}
jQuery
var hover1 = $('.hover1'); hover1.hover(function(){ hover1.css('border','5px solid blue'); }, function(){ hover1.css('border','5px solid red'); });
Source
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>제이쿼리</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script> <script type="text/javascript"> $(function(){ var hover1 = $('.hover1'); hover1.hover(function(){ hover1.css('border','5px solid blue'); },function(){ hover1.css('border','5px solid red'); }); }); </script> <style> .hover1{width:100px; height:50px; background:yellow} </style> </head> <body> <div class="hover1"></div> </div> </body> </html>