PinkCoding

CLASS web

jQuery

마우스 온오버시 이벤트 발생

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

저번강좌에서는 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>

결과는 바로 아래에서 확인할 수 있습니다.