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

妙高Web屋

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

Web制作

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

2018.1.31 2019.1.15

【jQuery】hoverイベント(マウスを乗せた時&離した時のイベントの記述方法)
Web制作 0 0
妙高Web屋LINE@ 友だち追加

ホームページで何かしらの操作をするとき、操作に応じた処理は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屋LINE@ 友だち追加
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

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

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

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

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