技術資料

error この記事は最終更新日から14年以上が経過しています。

jQuery の hover() を使って、マウスホバーにあわせてスタイルを変更することができます。

hover(マウスが乗っているときの処理,マウスが外れたときの処理);

という形式で指定するので、例えば「list」というクラスを指定した要素に対して、マウスが乗っているときだけ「list_hover」というクラスを適用したい場合は、以下のようになります。

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

「マウスが乗っているときの処理」で「addClass」＝文字通り、クラス「list_hover」を追加しています。
「マウスが外れたときの処理」で「removeClass」＝文字通り、クラス「list_hover」を削除しています。