【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~書き方と各メソッド~】勉強メモ①](https://qiita.com/k-yasuhiro/items/dfe305ff337e6ac8b406) [【jQuery~準備(読み込み)~】勉強メモ②](https://qiita.com/k-yasuhiro/items/c5f8aa277bd572d89cb4) [【jQuery~モーダルの表示・非表示~】勉強メモ③](https://qiita.com/k-yasuhiro/items/15449ad19f85275393e8)