ZeroPlus Media > Web制作 > JavaScript > 【jQuery】マウスを動かすだけで発火するmousemove/mouseover/mouseout

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

2022/03/31

2023/05/06

jQuery mousemove-mouseover-mouseout記事サムネイル

mousemove()、mouseover()、mouseout()の3つのイベントは、マウスを動かすだけで発火する便利なイベントです。この記事では「mousemove()、mouseover()、mouseout()のイベントの使い方」について解説します。

なお、クリックしたらイベントが発火するclickイベントについては下記の記事を一読ください。

【jQuery】click()はイベント発火に便利！使い方を解説

この記事で身につく内容

mousemove()イベントの使い方
mouseover()イベントの使い方
mouseout()イベントの使い方

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

mousemove()イベントの使い方
moseover()イベントの使い方
moseout()イベントの使い方
まとめ

mousemove()イベントの使い方

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

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

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.

出力された要素の上でマウスを動かすと、上記の動画のように「マウスを動かすたびにイベントが発火」します。

moseover()イベントの使い方

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.

出力された要素にマウスをホバーするとaddClassメソッドによってクラスが付与されます。

moseout()イベントの使い方

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.

出力された要素の上にマウスを配置した後、マウスを要素の外に出すとイベントが発火します。

上記の場合、マウスを要素の上に移動するとchange-greenクラスが付与され、マウスを要素の外に出すとchange-greenクラスが外れる処理をしています。

比較用としてhover()イベントを載せています。hover()の動きとしては、mouseoutとmouseoverを組み合わせたような動きを実現しています。