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

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

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

2018.1.31 2019.1.15

【jQuery】hoverイベント(マウスを乗せた時&離した時のイベントの記述方法)
Web制作 0 0

ホームページで何かしらの操作をするとき、操作に応じた処理は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イベントに関する調査・整理にあたって、下記のページを参考にさせていただきました。

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

ページの先頭へ戻る

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

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
0 0

企業のWeb担当者さん向け!メルマガ購読はこちら

妙高Web屋では、ホームページの管理・運営のお役立ち情報を当サイト内よりも早く、メールマガジンでご紹介しております。

次回配信予定のテーマは、こちらです!

「無料でお仕事を依頼する&お受けするときに気をつけたい事」

気になる方は、下記のボタンからメルマガ購読をお申し込みください。

メルマガをご購読いただいた方には、妙高Web屋作成の無料レポート「ホントは公表したくない!受注につなげるホームページ作りの話」をプレゼントいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ