この記事の要点

要素の上にマウスポインタが乗ったタイミングで発火するのがマウスオーバーイベント jQuery では .mouseover()、.mouseenter()、.hover()、.on('mouseover', ...) が使える mouseover は子要素に入るたびに発火する一方、mouseenter はバブルしないので親要素 1 回のみ発火 素の JavaScript なら addEventListener('mouseover', ...)。タッチ端末では発火しないため、操作可否は別途考慮する

マウスオーバーイベントとは

マウスオーバーイベントは、ユーザーが要素の上にマウスポインタを乗せた瞬間に発火するイベントです。ホバーで補足説明を表示したり、画像をハイライトしたり、ドロップダウンメニューを開いたりと、Web 上の対話的な振る舞いの基本になります。jQuery では複数の API が用意されているほか、素の DOM API でも mouseover / mouseenter イベントを購読できます。

jQuery でのマウスオーバー

1. .mouseover()

最もシンプルな書き方。バブリングする mouseover イベントを購読します。

$(function () {
  $('#test').mouseover(function () {
    $(this).text('マウスオーバーされました');
  });
});

2. .mouseenter()

子要素を出入りしてもバブルしないため、親要素に入った 1 回だけ発火させたいときに使います。

$('#card').mouseenter(function () {
  $(this).addClass('hover');
});

3. .hover()

マウスオーバー時と離脱時の処理をペアで書ける糖衣構文。内部的には mouseenter / mouseleave を使っています。

$('#btn').hover(
  function () { $(this).css('background', 'yellow'); }, // 入った
  function () { $(this).css('background', '');       }  // 離れた
);

4. .on('mouseover', ...) と動的要素

動的に挿入される要素にも反応させたい場合は、親要素にデリゲートして .on() を使います。

$('#list').on('mouseover', 'li', function () {
  $(this).addClass('active');
});

mouseover と mouseenter の違い

項目	mouseover	mouseenter
バブリング	する	しない
子要素間の移動で発火	毎回発火	発火しない
典型用途	子要素も巻き込んで状態を変えたい	カード全体のホバー検知

素の JavaScript（addEventListener）

const el = document.querySelector('#test');
el.addEventListener('mouseover', (e) => {
  el.textContent = 'マウスオーバーされました';
});

// バブルさせたくないなら mouseenter
el.addEventListener('mouseenter', (e) => {
  el.classList.add('hover');
});
el.addEventListener('mouseleave', (e) => {
  el.classList.remove('hover');
});

CSS の :hover との使い分け

単純な色変更やボーダー強調なら、JavaScript より :hover 擬似クラスを使う方が軽量で保守しやすいです。JavaScript のイベントは「ホバーをきっかけに別要素を変更したい」「ホバー時間を計測したい」「アクセス解析に送りたい」など状態を伴う処理で使います。

.btn { background: #eee; transition: background .2s; }
.btn:hover { background: #cce; }

タッチデバイスでの注意

スマートフォン・タブレットなど指で操作するデバイスではマウスオーバーは原則発生しません（最初のタップで擬似的にホバーが発火する実装もあるが挙動はバラバラ）。重要な操作（メニュー開閉や確定操作）はホバーだけに依存させず、必ずタップ／クリックでも発動できるようにしておきます。

関連記事

• JavaScript
• jQuery
• イベント
• クリックイベント
• マウスアウトイベント（mouseout / mouseleave）