ITコラム

jQuery CSS :hover

jQuery

2018.04.05

jQuery【 CSS 】hover でカーソルが当たった時の処理を実現するサンプル

CSS で :hover を使うと、カーソルが当たった時に CSS の設定を変更することができます。
今回は、jQuery で hover を使用する際のサンプルを紹介します。

jQuery を使用した CSS の設定方法等については、以下のページもご参照下さい。
jQuery【 CSS 】スタイルを動的に変更する
jQuery【 CSS 】colorとfontを変更するサンプル
jQuery【 CSS 】addClass、removeClass を使ってCSSを変更するサンプル
jQuery【 CSS 】toggleClass を使ってCSSの切り替えを行うサンプル
jQuery【 CSS 】プロパティの値を取得するサンプル
jQuery【 CSS 】!important で優先度を変更するサンプル
jQuery【 CSS 】hover でカーソルが当たった時の処理を実現するサンプル(本ページ)
jQuery【 CSS 】display を使用した表示・非表示に関するサンプル

目次

1.hover とは
2.マウスオーバー時に背景色を変更する
3.mouseover と hover との違い

1.hover とは

 
hover は、CSS の疑似クラスで、「 ポインティングデバイスの反応があるものの アクティブ化する必要はない状態 」の HTML 要素を選択します。

通常は、HTML 要素の上に マウスポインタ( カーソル )が当たった時に その要素が選択されます。

CSS の疑似クラスとは、セレクタに付加するキーワードで、選択された HTML 要素に対して特定の状態を指定する際に使用します。
詳しくは擬似クラスをご参照下さい。

▲目次へ戻る

 

2.マウスオーバー時に背景色を変更する

 
hover を使用して、マウスオーバー時に背景色を変更します。
下のボックス内にカーソルを当ててみて下さい。

 

 
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {

  $(".wkBox").hover(function() {

    // カーソルが当たった時の処理
    $(this).css("background-color", "skyblue");

  }, function() {

    // カーソルが離れた時の処理
    $(this).css("background-color", "#CCC");

  });
});
//-->
</script>

<div class="wkBox" style="background-color:#CCC; height:100px;">
 
</div>

カーソルが当たった時の処理部分のみを記述すると マウスオーバー時に背景色が変化しますが、カーソルが離れても背景色が元に戻りません。

マウスオーバー時の処理は、通常、カーソルが当たっている時だけ実行される処理を意図しているので、カーソルが当たった時の処理を記述する場合は カーソルが離れた時の処理も忘れずに記述します。

上のサンプルでは、デフォルトで背景色を「 #CCC 」に設定しているため カーソルが離れた時に「 #CCC 」に戻るように記述していますが、元々背景色の設定がない場合は「 $(“.wkBox”).css(“background-color”, “”); 」のように 空欄で指定します。

▲目次へ戻る

 

3.mouseover と hover との違い

 
mouseover と hover とを使用して、マウスオーバー時の動きを比較します。
下の各サンプルで、背景色の違うボックス間を 複数回カーソル移動させてみて下さい。

mouseover

 

hover

 
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  // mouseoverを使用
  $(".wkBox2").mouseover(function() {
    $(this).animate({fontSize : "24px"}, 500);
  });
  $(".wkBox2").mouseout(function(){
    $(this).animate({fontSize : "16px"}, 500);
  });
});

$(function() {
  // hoverを使用
  $(".wkBox3").hover(function(){
    $(this).animate({fontSize : "24px"}, 500);
  }, function(){
    $(this).animate({fontSize : "16px"}, 500);
  });
});
//-->
</script>

<div style="background-color:#CCC; height:100px;">
  <div class="wkBox2" style="background-color:peachpuff;">mouseover</div>
</div>
 
<div style="background-color:#CCC; height:100px;">
  <div class="wkBox3" style="background-color:peachpuff;">hover</div>
</div>

mouseover を使用したサンプルは、テキストが伸縮する動きが繰り返される現象が生じます。
これは、イベントバブリング( ある要素でイベントが発生すると 親や祖先要素にも同じイベントが発生すること )が原因です。

このようなイベントバブリングを発生させずにマウスオーバー時の処理を行うメソッドとして、mouseenter メソッドと mouseleave メソッドがありますが、jQuery では mouseenter メソッド及び mouseleave メソッドのショートカットメソッドとして hover が用意されています。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.