devil cat everdevel character

프로그래머가 아니던 시절 만들기 시작한 에버디벨 !
첫 오픈 한달과 최근 한달의 방문자수를 비교해보니 무려 190배 이상 증가했습니다.
그 사이 어느새 1년 9개월의 경력을 갖고 있는 프로그래머가 되었습니다.
실무의 경험을 담아 더 많은 내용으로 올해 언젠가 에버디벨이 책으로 나옵니다.
{HTML5, CSS3, jQuery, MySQL5, PHP7(PDO, OOP, MVC)}
아무것도 몰라도 컴퓨터만 있다면 하나부터 학습하며 발전해 나가는 자신을 보는 감동을 드리겠습니다.

disney Teyon kin

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

저번강좌에서는 click를 하면 어떠한 이벤트가 발생했죠. 이번에는 마우스 포인터를 올리면 생기는것을 해봅시다.

mouseenter();

지난번 강좌에서의 click()를 mouseenter()로 변경만 해주면 됩니다.

$('.class_name').mouseenter();

마우스 포인터가 대상체를 떠날때 이벤트 발생시키기

mouseleave();

마우스 포인터가 대상체에서 떠날때 어떠한 이벨트가 발생 시키기 위해서는 mouseleave();를 사용합니다.

$('.class_name').mouseleave();

활용 방법

다음의 노란색 동그라미에 마우스 포인터를 올리고 내리고를 해봅시다.

노란색 원에 마우스 포인터를 올리고 내려 보세요.

마우스 포인터를 올리면 어떠한 문구가 나오고 떠나면 어떠한 문구가 나오도록 하는 예제 입니다.

<!DOCTYPE html>
<html>
<head>
<title>
웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요. 
</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.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>
<title>
웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.
</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.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>
다음강좌는 4강.변수 선언 입니다. 클릭하면 다음 강좌로 이동합니다.