ホームページで何かしらの操作をするとき、操作に応じた処理は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イベント（マウスを乗せた時＆離した時のイベントの記述方法）
途中で色が変わる見出し罫線を作る方法【CSS3】
公開：2018年8月27日 更新：2018年8月27日
ホームページの本文の見出しには、様々なものを見かけます。 見出しの文字の背景に背景色とは異なる色を使って目立たせたり、文字の左側に線を引いてみたり。 …… 続きを読む
こんにちは、いつも「妙高Web屋」のサイトをご覧いただき、ありがとうございます。 こちらのページをご覧になった方の中には、 「情報を広く公開したいけ …… 続きを読む
wp_footer()の出力内容からjQueryやSVGタグ等を削除する方法【WordPressをカスタマイズ】
公開：2018年7月4日 更新：2018年7月4日
過去に当サイトで、［wp_head()］関数の出力内容のうち使用しないコードを削除するという記事をご紹介しました。 [blogcard url="http …… 続きを読む
「ホームページを作りたい！作らなきゃ！」 と言っても、どうすれば良いか分からないと思っていませんか？ この記事をご覧の方の中には、職場の上司やサーク …… 続きを読む
![要素の中身次第で幅が変動する場合＆[margin:0px auto;]が使えない場合でも左右中央寄せする方法【CSS3】](https://www.web-myoko.net/wp-content/uploads/2018/03/mykweb180307.jpg)
要素の中身次第で幅が変動する場合＆[margin:0px auto;]が使えない場合でも左右中央寄せする方法【CSS3】
公開：2018年3月8日 更新：2018年3月8日
先日、「要素の幅が変動しても左右中央寄せする方法」を、こちらの記事でご紹介しました。 [blogcard url="https://www.web-myo …… 続きを読む
ホームページをデザインするとき、ページ内のちょっとした要素に「角度」をつけたくなることがありませんか？ 「新着情報の一覧ページが、長方形の写真や四角いボタ …… 続きを読む
ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか？ 例えばテキストを画面の、あるいはエリアの中央 …… 続きを読む
【jQuery】特定のチェックボックスがチェックされているか・いないかで処理を分ける方法
公開：2018年2月21日 更新：2018年2月21日
Web制作jQuery[jquery]changeイベント[jquery]propメソッド[jquery]チェックボックス
ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。 また、チェックボックスを含むフォーム関連 …… 続きを読む
コーディング着手後のデザイン修正が難しい理由【ホントは公表したくないホームページ制作】
公開：2018年2月16日 更新：2018年2月15日
ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む
CSSで画像に乗算モードで色を乗せる方法は、実在する！【CSS3】
公開：2018年2月13日 更新：2018年2月12日
Photoshop（フォトショップ）では、様々なブレンドモード（描画モード）が実現できます。 その表現を応用すればデザイン性の高い作品も作れますが、ホーム …… 続きを読む