第9回 hover – jQueryによるJavaScript入門-Re:Creator's Kansai （リクリ）

こんにちは。トゥーアールの西畑です。

hoverはa要素のhover擬似クラスでよく見かけると思いますが、そいつのことです。

$("a:hover").css("color","red");

のように指定できればいいのですが残念ながらjQueryのCSSセレクタはhover擬似クラスには対応していません。

しかしCSSセレクタではなくhoverメソッドという形で利用することが可能です。

hoverメソッドは以下のように設定します。

$(CSSセレクタ).hover(function(){
	CSSセレクタで指定した要素にマウスが乗った際の命令
},function(){
	CSSセレクタで指定した要素からマウスが離れた際の命令
})

サンプルをご覧ください。

$(function(){
	$("a").hover(function(){
		$(this).addClass("hover");
	},function(){
		$(this).removeClass("hover");
	})
})

hoverメソッド以外に$(this)という新しい記述が登場していますが、hoverメソッドのfunction(){～}の間では、$(this)で現在マウスが乗っている要素を指定できます。

つまり、このコードはa要素にマウスが乗った場合、その要素にhoverというclass名を追加して、離れた場合hoverというclass名を削除すると言う命令になります。

CSSではIE6のhover擬似クラスがa要素にしか対応していませんが、jQueryのhoverメソッドはすべての要素で利用できますので、hover擬似クラスのクロスブラウザ対応としても利用することが可能です。

Re:Creator’s Kansai