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

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

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

この記事の目次

• 【結論】マウスを乗せた時のイベントの処理の記述方法
• ［応用］マウスを乗せた時＆離した時のイベントの処理の記述方法
• ［まとめ］マウスを乗せた時＆離した時の処理の記述方法

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

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

いかがでしょう。

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

ページの先頭へ戻る

［応用］マウスを乗せた時＆離した時のイベントの処理の記述方法

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

いかがでしょう。

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

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

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

ページの先頭へ戻る

［まとめ］マウスを乗せた時＆離した時の処理の記述方法

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

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

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

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

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

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

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

ページの先頭へ戻る