ZeroPlus Media > Web制作 > JavaScript > 【jQuery】hover()を使ったマウスホバー時の処理を解説

【jQuery】hover()を使ったマウスホバー時の処理を解説

JavaScript

2022/04/11

2023/05/06

jQueryにはWeb制作でよく使用されるクリックイベントの他に、マウスカーソルイベントがあります。マウスカーソルイベントの中でも代表的なhover()イベントは、マウスホバーの処理を簡単に行うことができます。

この記事では「jQueryのhover()イベントの使い方」について解説します。さらにこの記事の後半では、hover()と似たmouseover()との違いと、on('hover')との違いについても解説していきます。

この記事で身につく内容

jQueryのhover()イベントの使い方
hover()とmouseover()の違い
hover()とon('hover')の違い

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

hover()イベントの使い方
hover()とmouseover()の違い
hover()とon(‘hover’)の違い
まとめ

hover()イベントの使い方

hover()イベントは、jQueryのイベントの一つ。要素にマウスをホバー（マウスオーバーとマウスアウト）するとイベントが発火します。

基本書式は次のようになります。

基本書式

$('セレクタ').hover(
  function (){
   // 要素にマウスを載せたときの処理
  },
  function () {
   // 要素からマウスをはなした
  }
);

実際にコードを当てはめると下記のようになります。

<div class="box" id="js-box"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>

.box {
  width: 200px;
  height: 200px;
  cursor: pointer;
  background: orange;
}

const box = $("#js-box")
$(function () {
  box.hover(
    function () {
      $(this).css('background', 'red');
    },
    function () {
      $(this).css('background', 'orange');
    }
  )
});

出力結果

See the Pen jQuery-hover by ZeroPlus (@zeroplus-programming) on CodePen.

要素にマウスをホバーすると、CSSメソッドによる背景色が変わるイベントが発火します。

動きとしては、mouseenter()とmouseleave()の2つのイベントの組み合わせとなります。

mouseenter()とmouseleave()の2つイベントに関しては、下記の記事で解説していますのでご一読ください。

【jQuery】マウスの出入りでイベント発火。mouseenterとmouseleveの使い方

hover()とmouseover()の違い

hover()とmouseover()の2つのイベントは、どちらも要素にマウスをホバーするとイベントが発火します。2つの違いは、「子要素にもイベントが発火するか」という違いがあります。

例えば下記のようなコードで、hover()の場合とmouseover()の場合とで動きを確認してみましょう。

<div class="box" id="js-box-hover">
  <div class="box__inner">
    hover
  </div>
</div>
<div class="box2" id="js-box-over">
  <div class="box__inner">
    mouseover
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>

.box,
.box2 {
  width: 200px;
  height: 200px;
  cursor: pointer;
  background: orange;
  color: #000;
  display: flex;
}

.box {
  margin-bottom: 10px;
}

.box__inner {
  width: 100px;
  height: 100px;
  cursor: pointer;
  background: white;
  margin: auto;
}

const hov = $("#js-box-hover")
const over = $("#js-box-over")

hov.hover(
  function () {
    console.log('hover');
  }
);

over.mouseover(function () {
  console.log('mouseover');
});

出力結果

コンソール画面を確認すると、hover()の場合は子要素にマウスを移動してもイベントは発火しません。mouseover()の場合は、子要素にマウスを移動するとイベントが発火します。

これがhover()とmouseover()の違いです。

hover()とmouseover()の違い

hover()：イベントが子要素に影響しない
mouseover()：イベントが子要素にも影響する

hover()とon(‘hover’)の違い

hover()イベントとon('hover')の違いは、「動的に生成された要素にイベントが効くか」という違いがあります。

hover()イベントの場合を見てみます。

<button id="js-btn">ボタンをクリック！</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

const btn = $('#js-btn');
const box = $('.box');
btn.click(function () {
  $('button').after("<button class='box'>hover!</button>");
});

$('.box').hover(function () {
  $('.box').css('background', 'red');
});

出力結果

hover()イベントの場合は、動的に生成された要素に対してイベントが効きません。

on("hover")の場合を見てみます。on("hover")は下記のようにmouseenter()とmouseleave()の2つのイベントで実行します。

const btn = $('#js-btn');
const box = $('.box');
btn.click(function () {
  $('button').after("<button class='box'>hover!</button>");
});

$(document).on({
  'mouseenter': function () {
    $(this).css('background', 'red');
  },

  'mouseleave': function () {
    $(this).css('background', '');
  }

}, '.box');

出力結果