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

2019年4月11日jQuery

マウスホバーイベントを実装する方法

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

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

jQueryのhover()関数はマウスホバーオン時、マウスホバーアウト時の2つの動作を定義する事が可能です

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

マウスホバー時に指定した動作や変更は、ホバーアウトしても停止・解除されません
基本的にはホバーアウトで動作の停止や戻す処理を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');
  }
);

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年4月11日jQueryイベント

Posted by ヨウスケ