happy cat image

Start Web Coding

Your First step toward web coding,
Start Web Coding

UI 변경

마우스 포인터를 올릴때 이벤트 발생시키기

저번강좌에서는 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="http://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="http://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>

강좌로 돌아가기