방문해 주셔서 감사합니다.
저번강좌에서는 click를 하면 어떠한 이벤트가 발생했죠. 이번에는 마우스 포인터를 올리면 생기는것을 해봅시다.
지난번 강좌에서의 click()를 mouseenter()로 변경만 해주면 됩니다.
$('.class_name').mouseenter();
마우스 포인터가 대상체에서 떠날때 어떠한 이벨트가 발생 시키기 위해서는 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()도 있습니다.
$('.class_Name').hover(mouseenter()의 기능,mouseleave()의 기능);
$('.class_Name').hover(function(){
$('.class_Name').css('border','5px solid blue');
},
function(){
$('.class_Name').css('border','5px solid red');
}
);
위와 같이 사용할 수 있는데요.
그럼 실제 만들어 봅시다.
<div class="hover1"></div>
.hover1{width:100px; height:50px; background:yellow}
var hover1 = $('.hover1');
hover1.hover(function(){
hover1.css('border','5px solid blue');
},
function(){
hover1.css('border','5px solid red');
});
<!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>
결과는 바로 아래에서 확인하겠습니다.
봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.
컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다.
컨텐츠
더보기
댓글 0개
정렬기준
