• HOME > 
  • JavaScript > 
  • jQueryのhoverでマウスホバー時の処理を行う方法【m...

jQueryのhoverでマウスホバー時の処理を行う方法【mouseoverやonとの違い】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

hoverメソッドの使い方

jQeuryでユーザーがマウスホバーした時に処理を実行させたい場合には、「hoverメソッド」を使用します。

CSSのhoverとの違い

CSSにも疑似クラス「hover」を使えばマウスホバー時にスタイルを変更することはできますが、jQueryのhoverメソッドを使えばマウスホバー時にテキストを書き換えるなど様々な処理を実行することが可能です。

hoverメソッドの記述方法

hoverメソッドは次のようにマウスがホバーした時と離れた時の処理をそれぞれ記述します。

hoverメソッドの書き方

次の例ではマウスホバー時に背景色の変更とテキストの書き換えを実行するようにしています。

HTML

<div class="sample" style="background:#224fdd;">カーソルをのせて!</div>

jQuery

$(".sample").hover(
    function(){
        //マウスホバー時の処理
        $(this).css("background","#dd2222");
        $(this).text("マウスホバー中!");
    },
    function(){
        //マウスが離れた時の処理
        $(this).css("background","#224fdd");
        $(this).text("カーソルをのせて!");
    }
);

プレビュー

カーソルをのせて!

mouseoverメソッドとの違い

jQueryにはhoverメソッド以外にもマウスホバー時の処理を行うメソッドが存在します。その一つが「mouseoverメソッド」です。

hoverメソッドとmouseoverメソッドの違いは、まずmouseover単体ではマウスホバー時の処理しか行えないという点です。

mouseoverでマウスホバー時の処理を行う場合、マウスが離れた時の処理は「mouseout」という別のメソッドを使って行わなくてはなりません。

jQuery

//マウスホバー時の処理
$(".sample").mouseover(function(){
    $(this).css("background","#dd2222");
    $(this).text("マウスホバー中!");
});
//マウスが離れた時の処理
$(".sample").mouseout(function(){
    $(this).css("background","#224fdd");
    $(this).text("カーソルをのせて!");
});

子要素にマウスホバーした時の違い

両者の大きな違いは、子要素にホバーした時に処理が発火するかどうかという点にもあります。

  • hoverメソッドは子要素にマウスホバーしても発火しない
  • mouseoverメソッドは子要素にマウスホバーしても発火する

次の例ではマウスホバーする度に回数がカウントされていきますが、hoverメソッドの方は要素内でカーソルを動かして子要素に移っても何も起きません。一方、mouseoverメソッドは要素内から子要素へカーソルを移したときにも処理が行われ、カウントが進みます。

HTML

<div id="testA" class="test" style="background:#224fdd;">hover<span>0</span></div>
<div id="testB" class="test" style="background:#224fdd;">mouseover<span>0</span></div>

jQuery

var countA = 0;
$("#testA").hover(
    function(){
        countA++;
        $("#testA span").text(countA);
    },
    function(){
        var countA = 0;
    }
);
var countB = 0;
$("#testB").mouseover(function(){
    countB++;
    $("#testB span").text(countB);
});
$("#testB").mouseout(function(){
    var countB = 0;
});

プレビュー

hover0
mouseover0

このように子要素に対する処理という点において両者には大きな違いがありますので、使用する目的や状況に応じて使い分けが必要です。

onメソッドによるマウスホバーイベントとの違い

hoverメソッド以外でマウスホバー時の処理を行うメソッドには「onメソッド」もあります。

onメソッドはページの読み込み(ロード)やクリックといったアクションに応じて処理を実行させることができるメソッドです。

onメソッドを使ってマウスホバー時の処理を実行させるには次のように記述します。

onメソッドによるマウスホバーイベントの書き方

jQuery

$("#testC").on({
    "mouseenter":function(){
        //マウスホバー時の処理
        $(this).css("background","#dd2222");
        $(this).text("マウスホバー中!");
    },
    "mouseleave":function(){
        //マウスが離れた時の処理
        $(this).css("background","#224fdd");
        $(this).text("カーソルをのせて!");
    }
});

後から追加された要素でも処理を設定することが可能

hoverメソッドとonメソッドの最大の違いは、onメソッドはJavascriptなどで後から追加(生成)した要素に対しても処理を設定(操作)できるという点です。

例として、クリックによって追加した要素にマウスホバーの処理を設定してみます。

まずは、次のようにクリックによって要素を追加するようにしておきます。

HTML

<button id="btn">クリックして!</button>

jQuery

$("#btn").on("click",function(){
    $(this).before("<div id='testD' style='background:#224fdd;'>追加された要素</div>");
});

次に追加した要素「testD」に対してhoverメソッドでマウスホバーの処理を指定してみます。

jQuery

$("#testD").hover(
    function(){
        //マウスホバー時の処理
        $(this).css("background","#dd2222");
        $(this).text("マウスホバー中!");
    },
    function(){
        //マウスが離れた時の処理
        $(this).css("background","#224fdd");
        $(this).text("カーソルをのせて!");
    }
);

プレビュー

ボタンをクリックするとその上に要素(testD)が生成されます。この要素にマウスホバーしてもhoverメソッドを使って記述した処理が実行されないことがわかります。

今度はonメソッドを使って処理を記述してみます。

動的に追加した要素に対する処理は次のような書き方になります。

onメソッドによる動的に追加した要素に対する処理の書き方

jQuery

$(document).on({
    "mouseover":function(){
        //マウスホバー時の処理
        $(this).css("background","#dd2222");
        $(this).text("マウスホバー中!");    
    },
    "mouseleave":function(){
        //マウスが離れた時の処理
        $(this).css("background","#224fdd");
        $(this).text("カーソルをのせて!");
    }
},"#testD");

プレビュー

onメソッドを使うとボタンをクリックして生成された要素にもマウスホバーの処理が実行されました。

ユーザーのアクションに応じて様々な処理が必要になるようなサイトでは、動的に追加された要素に対しても有効なonメソッドが重宝されます。

リンク先のサムネイル
jQueryのクリックイベントの使い方【click()とon()の違い】

要素がクリックされた時に特定の処理が実行されるようにしたい場合は、jQueryのclickメソッドかonメソッドを使用してクリックイベントを作成します。このページではそれぞれのメソッドの使い方と...【もっと読む】

まとめ

以上がjQueryのhoverメソッドでマウスホバー時の処理を行う方法です。

mouseoverやonメソッドとの違いを理解して、用途に応じた使い分けが必要になります。

広告
広告

関連する記事

サムネイル

JSのkeyup・keydown・keypressの違い【キ……

2024年06月13日
JavaScriptの「keyup」「keypress」「keydown」はいずれもユーザーのキーボードイベントを処理したい時に使用します。それぞれ処理が発火するタイミングなどに違いがあるので、用途に応じた使い分けが必要です。
サムネイル

JSでテキストボックスに入力された値を即時取得する【this……

2024年06月13日
ユーザーがinputのテキストボックスに入力した値をJavaScriptを使って即時取得して処理させたい状況がありましたので、その方法を備忘録として残しておきます。
サムネイル

JavaScriptで偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索(郵便番号を打ち込むと住所が自動入力される)機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。
サムネイル

JSで特定の位置までスクロールされたら要素を固定する方法【s……

2024年04月12日
CSSのstickyのような動きをJSで実装する JavaScriptを使って、「ある要素がページ上部に当たるまでスクロールされたら、その位置でその要素を固定表 […]
サムネイル

JSで日付を表示するならtoLocaleDateString……

2024年03月15日
toLocaleDateStringは日付のフォーマットを少ないコードで簡潔に行えるメソッドです。20XX年X月X日というような年月日表示はもちろん、曜日の取得や西暦と和暦の変換まで即座に行ってくれます
サムネイル

JSで自動かな入力補完を実装できるライブラリ【jquery.……

2024年03月15日
jquery.autokana.jsは入力された日本語テキストのふりがな(フリガナ)を自動的に別の欄に入力してくれるJQueryのライブラリです。