ZeroPlus Media > Web制作 > JavaScript > 【jQuery】マウスカーソルイベント一覧まとめ

【jQuery】マウスカーソルイベント一覧まとめ

JavaScript

2022/04/20

2023/05/06

jQueryで使われるマウスカーソルイベントについてまとめました。

マウスカーソルイベントは、マウスのホバー（マウスオーバーとマウスアウト）だけで発火する便利なイベントです。この記事で基礎知識をインプットしましょう！

また、各セクションでjQueryのイベントごとの解説記事を紹介していますので合わせてご一読ください。

クリックイベントに関する記事は下記の記事でまとめています。

【jQuery】クリックイベント一覧まとめ

この記事で身につく内容

jQueryのマウスカーソルイベントの基礎知識

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

【jQuery】マウスカーソルイベントのまとめ
まとめ

【jQuery】マウスカーソルイベントのまとめ

jQueryのマウスカーソルイベントは次のようなものがあります。

mousemove()：マウスが要素の上で移動したときイベントが発火
mouseover()：マウスが要素の上にあるときイベントが発火
mouseout()：マウスが要素から離れたときイベントが発火
mouseenter()：mouseover()と同じで、マウスが要素の上にあるとき発火
mouseleave()：mouseout()と同じで、マウスが要素から離れたとき発火
hover()：mouseenter()とmouseleave()の組み合わせ

それぞれのイベントについて簡単に紹介していきます！

mousemove()イベントについて

mousemove()イベントは、マウスが要素の上で移動したときに発火します。

mousemove()の基本書式

$('セレクタ').mousemove(function (){
  // ここに処理を書く
});

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

mousemove()のサンプル

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

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

.add {
  width: 100px;
  height: 100px;
  background: red;
  margin-bottom: 10px;
}

const box = $('#js-box');
box.mousemove(function () {
  box.append('<div class="add">add!<div>')
});

出力結果

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

mousemove()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】マウスを動かすだけで発火するmousemove/mouseover/mouseout

mouseover()イベントについて

mouseover()は、マウスが要素の上にあるとき発火します。

mouseover()の基本書式

$('セレクタ').mouseover(function(){
  // ここに処理を書く
});

上の書式にコードを当てはめると次のようになります。

mouseover()のサンプル

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

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

.change-blue {
  background: blue;
}

const box = $('#js-box');

box.mouseover(function () {
  box.addClass('change-blue');
});

出力結果

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

mouseover()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】マウスを動かすだけで発火するmousemove/mouseover/mouseout

mouseout()イベントについて

mouseout()は、マウスが要素から外れたときに発火します。

mouseout()の基本書式

$('セレクタ').mouseout(function(){
  // ここに処理を書く
});

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

mouseout()のサンプル

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

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

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

.change-green {
  background: green;
}

const box = $('#js-box');
const hov = $('#js-hover');

box.mouseover(function () {
  box.addClass('change-green');
});

box.mouseout(function () {
  box.removeClass('change-green');
});

// hoverイベント
hov.hover(
  function() {
    hov.css('background', '#ff0');
  },
  function() {
    hov.css('background', '#09c');
  }
);

出力結果

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

mouseout()については下記の記事で詳しく解説していますので、ご一読ください。

【jQuery】マウスを動かすだけで発火するmousemove/mouseover/mouseout

mouseenter()イベントについて

mouseenter()は、マウスが要素の上に載っている状態で発火します。

基本書式

$('セレクタ').mouseenter(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');

box.mouseenter(function () {
  alert('ok');
});

出力結果

See the Pen mouseenter-alert by ZeroPlus (@zeroplus-programming) on CodePen.

mouseenter()とmouseover()は動きは似ていますが、mouseenter()のほうは「イベントが子要素に影響しない」という違いがあります。

mouseenter()については下記の記事で詳しく解説していますので、ご一読ください。

下記の記事でmouseenter()とmouseover()の違いについても解説しています。

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

mouseleave()イベントについて

mouseleave()は、マウスが要素から離れたときに発火します。

基本書式

$('セレクタ').mouseleave(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;
}

box.mouseleave(function () {
  alert('ok');
});

出力結果

See the Pen mouseleace-alert by ZeroPlus (@zeroplus-programming) on CodePen.

mouseleave()とmouseout()は動きは似ていますが、mouseleave()のほうは「イベントが子要素に影響しない」という違いがあります。

mouseleave()については下記の記事で詳しく解説していますので、ご一読ください。

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

hover()イベントについて

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

基本書式

$('セレクタ').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メソッドによる背景色が変わるイベントが発火します。