jQueryで要素にマウスホバーイベントを実装する方法

2019-06-18jQuery

jQueryを使ってdivやpタグなどの要素やテキストにマウスホバーイベントを実装する方法です。

hover()関数でマウスホバーイベントを実装

jQueryのhover()イベントを利用して、指定した要素に対してマウスホバーオン時、マウスホバーアウト時の2つの動作を定義する事が可能です。

hover(マウスホバーオン時, マウスホバーアウト時);
$('#target').hover(
function(){},
function(){}
);

hover()イベントにはひとつまたはふたつの関数処理を指定します。

ひとつ目の関数にマウスホバー時の動作を指定しますが、マウスホバーした際の動作や変更は、ホバーアウトしても停止・解除されません。

基本的にはホバーアウトで動作の停止や初期値に戻す処理などを2つ目に関数に記述する事になります。

動作の定義はひとつでも実行可能ですが、その場合はマウスホバーオン時ではなくマウスホバーオン時・マウスホバーアウト時の両方で実行される点に注意します。

マウスホバーオン時のみのイベントを実装する場合は、mouseover()関数を利用して停止や解除時はmouseout()関数やoff()関数を利用するか、またはon()イベント関数で実装可能です。

hover()関数でのマウスホバーイベントの動作サンプル

See the Pen Mouse hover event (jQuery) by yochans (@yochans) on CodePen.

jQuery

$('#target').hover(
 function(){
    $('#target').css('background','#cd5c5c');
  },
 function(){
    $('#target').css('background','#20b2aa');
  }
);

ひとつ目の関数にて要素の背景色を変更しています。また2つ目の関数にて元の色に戻しています。

on()関数でマウスホバーイベントを実装

jQueryのon()イベント関数でマウスホバーオン時、マウスホバーアウト時の2つの動作を定義するにはmouseenter(ホバーオン時)とmouseleave(ホバーアウト時)を利用します。

on({マウスホバーオン時, マウスホバーアウト時});
$('#target').on({
`mouseenter`:function(){},
`mouseleave`:function(){}
});

mouseenterでマウスホバー時に指定した動作や変更は、ホバーアウトしても停止・解除されません。

mouseleaveにてホバーアウトで動作の停止や戻す処理を2つ目に関数に記述する必要があります。

on()関数でのマウスホバーイベントの動作サンプル

See the Pen Mouse hover event (jQuery) by yochans (@yochans) on CodePen.

jQuery

 $('#target').on({
        'mouseenter':function(){
        $('#target').css('background','#cd5c5c');
        },
        'mouseleave':function(){
        $('#target').css('background','#20b2aa');
        }
 });

2019-06-18jQueryイベント

Posted by Yousuke.U