happy cat image

everdevel

So This Is Love

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.
























에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

방문해 주셔서 감사합니다.

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

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

결과는 바로 아래에서 확인하겠습니다.


봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.

최경아 크리에이티브디렉터의 호텔웨딩플라워디자인 컬러별로 제안하는 웨딩 플라워 공간장식 예비 신부들의 플라워제안과 플로리스트들에게 꽃 장식을 제안하는 플라워디자인 서적


    
    

강좌로 돌아가기

댓글 0개

정렬기준