【jQuery~hover 이벤트~】공부 메모④

jQuery에 대해 배우는 중.
이번은 hover 이벤트에 대해.
거의 자신의 공부 메모입니다.
과도한 기대는하지 마십시오.

hover 기능

hover 이벤트
마우스를 태울 때 이벤트를 발생시킨다.

기본 구조

$( セレクタ ).hover(function(){
　　// マウスを乗せたときの処理
}, function(){
　　// マウスを離したときの処理
});

코드 샘플

HTML

<div class="modal">hoverイベント</div>

jQuery

$(function() {
  //マウスを乗せたら発動
  $('modal').hover(function(){
    //マウスを乗せたら色が変わる
    $(this).css('color', '#FF11FF');
  //ここにはマウスを離したときの動作を記述
  },function() {
    //色指定を空欄にすれば元の色に戻る
    $(this).css('color', '');
  });
});

　-이런 구현

코드 샘플 2

HTML

<div class="modal">hoverイベント
  <p class="contents">要素取得</p>
</div>

jQuery

$(function(){
  $('.modal').hover(
    function() {
      // 子要素の「.contents」の要素を取得し、activeクラスをつける
      $(this).find('.contents').addClass('active');    
    },function() {
      // 子要素の「.contents」の要素を取得し、activeクラスを外す
      $(this).find('.contents').removeClass('active');
    }
  );
});

CSS

.contents{
  display: none;
}

.active{
  display: block;
}

　-이런 구현

　-addClass 메소드
addClass 메소드를 사용하면 지정된 요소에 클래스를 추가 할 수 있습니다.
지정하는 클래스명 앞에 도트는 불필요.

　-removeClass 메소드
removeClass 메소드를 사용하면 지정된 요소에서 지정된 클래스를 제거 할 수 있습니다.

-find 메소드
find 메소드는, 모든 자손 요소(자신보다 아래의 계층의 요소 모두) 중에서, 지정한 셀렉터를 가지는 요소를 취득한다.

과거 게시물 기사

【jQuery～쓰는 방법과 각 메소드～】공부 메모①
【jQuery～준비(로드)～】공부 메모②
【jQuery~모달 표시·숨기기~】 공부 메모③