新潟県妙高市|ホームページと広告の相談相手

MENU [+]閉じる [×]
【jQuery】hoverイベント(マウスを乗せた時&離した時のイベントの記述方法)

ホームページで何かしらの操作をするとき、操作に応じた処理はjQueryを使って実装されることが多くあるかと思います。

代表的なものの一つとして「hoverイベント(マウスのカーソルが該当の要素に乗った時に起こる一連の処理)」が挙げられます。

今回は、そのhoverイベントの記述方法をご紹介します。

この記事の目次

【結論】マウスを乗せた時のイベントの記述方法

$(function() {
	$('.className01').hover(function() {
		$(this).css('color', '#ffcc00');
		$(this).css('background', '#333333');
	});
});

簡単にサンプルを作ってみました!

サンプル的に動くものを作ってみました。スマートフォンからご覧いただいている方は「乗せる」ではなく、1秒程度、長めにタップ(押す動作)をしてみてください。
▼▼▼

>>ここにマウスのカーソルを乗せてみてください。<<

いかがでしょう。

「ここにマウスのカーソルを乗せてみてください。」の文言が、文字黄色・背景黒になりましたか(^o^)??

ページの先頭へ戻る

[応用]マウスを乗せた時&離した時のイベントの処理の記述方法

$(function() {
	$('.className02').hover(function() {
		$(this).css('color', '#ffcc00');
		$(this).css('background', '#333333');
	}, function() {
		$(this).css('color', '');
		$(this).css('background', '');
	});
});

簡単にサンプルを作ってみました!

サンプル的に動くものを作ってみました。スマートフォンからご覧いただいている方は「乗せる」ではなく、1秒程度、長めにタップ(押す動作)をしてみてください。
▼▼▼

>>ここにマウスのカーソルを乗せたり・離したりしてみてください。<<

いかがでしょう。

今度は、うまくいっていればテキストの色が変わったり・戻ったりという動きを繰り返すはずです。

スタイルを元に戻す場合は「$(this).css(‘background’, ”);」のようにして、2番目の引数を空にすると良いかと思います。

(乗せたり離したりは、スマートフォンからご覧の方にはご確認しづらいかもしれません、ゴメンなさい…。)

ページの先頭へ戻る

[まとめ]マウスを乗せた時&離した時の処理の記述方法

特定の要素にマウスを乗せた時と、そこから離した時のイベントの処理は、こちらのように記述します。

$(function() {
	$('.className02').hover(function() {
		/*マウスを乗せた時の処理*/
	}, function() {
		/*マウスを離した時の処理*/
	});
});

特に大きな違いはありませんが、1行にまとめると下記のようになります。

$(function() {$('.className02').hover(function() {/*マウスを乗せた時の処理*/}, function() {/*マウスを離した時の処理*/});});

少しずつ処理の記述方法を覚えながら、できることを増やしていけるといいですね( ̄▽ ̄)!

なお、今回のhoverイベントに関する調査・整理にあたって、下記のページを参考にさせていただきました。

大変ありがとうございました。

ページの先頭へ戻る

メールマガジンで最新情報をゲット!

当サイトの更新情報は、メールマガジンでもお知らせしております。
「思い出のカレンダー制作」に関する情報もあわせてどうぞ。

メールアドレスを入力してください

この記事の感想をお寄せください

[【jQuery】hoverイベント(マウスを乗せた時&離した時のイベントの記述方法)]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

関連記事一覧:【jQuery】hoverイベント(マウスを乗せた時&離した時のイベントの記述方法)

ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか? 例えばテキストを画面の、あるいはエリアの中央 …… 続きを読む

ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。 また、チェックボックスを含むフォーム関連 …… 続きを読む

ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.