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

2023-02-16jQuery イベント,jQuery

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');
	}
})