過去バージョン

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

マウスオーバーイベントは、ユーザーが要素の上にマウスポインタを乗せた瞬間に発火するイベントです。ホバーで補足説明を表示したり、画像をハイライトしたり、ドロップダウンメニューを開いたりと、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 の違い

素の 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）