
ホームページで何かしらの操作をするとき、操作に応じた処理は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イベントに関する調査・整理にあたって、下記のページを参考にさせていただきました。
大変ありがとうございました。
こちらの記事に感想をお寄せください
こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。
この記事の感想を投稿する企業のWeb担当者さん向け!メルマガ購読はこちら
妙高Web屋では、ホームページの管理・運営のお役立ち情報を当サイト内よりも早く、メールマガジンでご紹介しております。
次回配信予定のテーマは、こちらです!
「無料でお仕事を依頼する&お受けするときに気をつけたい事」
気になる方は、下記のボタンからメルマガ購読をお申し込みください。
メルマガをご購読いただいた方には、妙高Web屋作成の無料レポート「ホントは公表したくない!受注につなげるホームページ作りの話」をプレゼントいたします。