jQuery | 要素にマウスホバーイベントを実装する方法
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.
$('#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()関数でのマウスホバーイベントの動作サンプル
jQueryのon()関数を利用したマウスホバーイベントの動作サンプルです。
マウスホバー時にターゲット要素の背景色を変更、マウスホバーアウト時に元の色に戻しています。
See the Pen Mouse hover event (jQuery) by yochans (@yochans) on CodePen.
$('#target').on({
'mouseenter': function () {
$('#target').css('background', '#cd5c5c');
},
'mouseleave': function () {
$('#target').css('background', '#20b2aa');
}
})