【jQuery初級】jQueryでマウスオーバー時の文字色の変化を実装
今回は前回に引き続き、jQueryを使用したサイト上の簡単な動作を実装してみました。
今回は、「指定したテキストにマウスオーバーした時に色が変わる」という動作をjQueryを用いて実装しました。
はてなブログで初めてjQueryを使用する場合は、こちらの前回の過去記事もご参考にしていただければと存じます。
こちらの記事では、はてなブログにおいてjQueryを使用するための前準備をしました。
また、マウスオーバーとは、私たちがパソコンを使用するときにお馴染みの矢印のカーソルを、対象物の上に合わせるという動きです。
言葉で説明すると、余計に難しく聞こえてしまいますが、通販や動画サイトで「購入する」というボタンの上に矢印のカーソルを持っていく動作、そうあれです。
パソコンに触れる日には、何かしらにマウスオーバーをせずにパソコンを閉じてしまうなんて方はいないと言えるくらいのすごく基本的な動作ですね。
参考書籍
以下の書籍を参考にさせていただきました。
見た目の高級感で選びました。
まだ、全てのページに目を通していないのですが、テキスト、図解バランスよく配置されていて第１印象良いです。
しばらくお世話になります。
¥2838円(本)
¥2554円(kindle) ※amazon 2022/01/10現在
1.実行結果（マウスオーバー）
説明するよりも実践したほうがわかりやすいと思うので、以下に私が今回実装したjQueryによるマウスオーバー時の文字色の変化です。
「[–カーソルを合わせてみてね–]」と書いてあるところまでマウスを持って行き、カーソルを合わせてみてください。
カーソルが合うと当時に黒色の文字が黄色に変化したことが確認できます。
これは以下のようなコードをHTMLの先頭に記述するだけで実現できます。
ソースコード
<script type="text/javascript">
$(function(){
$('#test').on('mouseover', function(){
$('#test').css('color', '#ebc000');
});
});
</script>//動作させる文字列
<div id="test"><span style="font-size: large;">[--カーソルを合わせてみてね--]</span></div>ポイントはスクリプトの方のコードだけでなく、動作させる側のHTMLコードにも気をつける必要があります。
動作させる文字列側のコードでは id = “test” というコードがあります。
これはスクリプトの方で動作させる文字列を認識させる時に使用します。
つまり、上のスクリプトのコードでは、「idがtestの文字列の色を変化させるようにしてください。」 という具合に命令をしています。
初めて成功したときはなかなかに感動すると思います。
しかし、しばらくしてから次のような思いが浮かんできました。
色がずっと黄色のままだ、、。
そうなのです。 上のコードではマウスオーバー時の動作しか記述していないため、１度マウスオーバーしてしまうと、色が変化してそれっきりなのです。
そこで、マウスを離した後に文字の色が元に戻り、再びマウスオーバーしたときに帰路に変化して、、というような動作を実現したいと思いました。
今回は、上で紹介させていただいたコードに少し付け加えることで、その動作を実現できましたので、下に紹介させていただきます。
2.実行結果（マウスオーバー&アウト）
では先ほどと同様に、以下の「[–カーソルを合わせたり離したりしてみてね–]」という文字の上にカーソルを合わせてみてください。
[–カーソルを合わせてみてね–]
同じように、カーソルを合わせた直後に文字の色が黄色に変化したと思います。
しかし、先ほどの動作と異なる点も垣間見えたと思います。
それはカーソルを離した時に文字の色が下の黒色に戻るということです。
なので、半永久的に文字色の変化を楽しむことができます。
この動作は以下のようなコードで実現しました。
ソースコード
<script type="text/javascript">
$(function(){
$('#test2').on('mouseover', function(){
$('#test2').css('color', '#ebc000');
});
$('#test2').on('mouseout', function(){
$('#test2').css({color: ''});
});
});</script>//動作させる文字列
<div id="test2"><span style="font-size: large;">[--カーソルを合わせたり離したりしてみてね--]</span></div>スクリプトの方のコードは先ほどのコードの下に付け加える形で記述すると、見た目はすっきりしますが、分けて書いても編集画しやすいと思いますのでどちらでも良いと思います。
ポイントはマウスアウトした場合についても動作を記述していることです。
コードをよくみてみると”mouseout”という文字が記述されているところがあります。
マウスアウトの意味はだいたい御察しのとおり、カーソルを対象物から離すということです。
つまりマウスオーバーとは正反対の動作になります。
上のコードではマウスアウトした際に
color: ”
と記述しています。
これはマウスアウトした時に色を空白にする、つまり元の色に戻すという動作になります。
これによって、マウスのカーソルを合わせたり離したりするたびに色が変化するというわけです。
最後に
今回は前回よりもjQueryについて少し踏み込んだ内容でした。
とは言え、まだまだ足を踏み入れたばかりですのでこれからも少しずつ記事を書いていきたいと思います。
私の当面の目標は「目次からページ内リンクに移る時に滑らかに動作させること」です。
これ、実ははてなブログに元からついている目次機能を使用することで実装できるのです。
しかし、自分の力でやってみたいので、遠回りのような気がしますが地道に頑張ってまいります。
以上、最後までありがとうございました。
関連記事
＼ シェアする ／
