2024年06月14日

jquery：hover(f1,f2)

このイベントの説明

jQueryの hover(f1,f2) は、HTML要素にマウスが乗った時のイベント処理と、外れた時のイベント処理を記述します。

構文

セレクタ.hover(function(){マウスがONした時の処理},function(){OFFした時の処理})

事例

①BOXにカーソルが乗ったらBOXの色を変える。

下記のBOXにカーソルをONして下さい。

背景色が赤に変わります。

カーソルが外れると元に戻ります。

上記は下記のプログラムから構成されています。

<div class='box' style='cursor:pointer;;border:1px solid black;width:100px;height:100px;background:blue;'>
</div>
<script>
$(function(){
	$('.box').hover(
		function(){
	 		now_color = $(this).css('background');
	 		$(this).css('background','red');
		},
	 	function(){
	 		$(this).css('background',now_color);
	 	}
	);
});
</script>

■1～2行目：HTML

■4～14行目：jQuery

メモ

上記プログラムの7行目の変数[now_color]の変数をVar宣言をしてない理由は下記になります。

変数規則と文字連結で説明している様に、Var宣言をするとローカル変数、宣言をしないとグローバル変数になります。

ローカル変数は関数の中で有効な変数なので、上記の様に他の関数の中で値を参照する場合は、グローバル変数としてデータを受け渡す必要があるためです。