jQueryでマウスオーバー時の文字色の変化を実装

はじめに

今回は前回に引き続き、jQueryを使用したサイト上の簡単な動作を実装してみました。

今回は、「指定したテキストにマウスオーバーした時に色が変わる」という動作をjQueryを用いて実装しました。

はてなブログで初めてjQueryを使用する場合は、こちらの前回の過去記事もご参考にしていただければと存じます。

こちらの記事では、はてなブログにおいてjQueryを使用するための前準備をしました。

はてなブログでjQueryの動作確認

はじめに今回ははてなブログでJQueryを試しに実行してみました。　JQueryとは私も勉強不足ですので、調べてみました。JQueryはJavaScriptを書き方を簡単にするためのJavaScriptのライブラリです。つまり、JQuery

teaprog.com

また、マウスオーバーとは、私たちがパソコンを使用するときにお馴染みの矢印のカーソルを、対象物の上に合わせるという動きです。

言葉で説明すると、余計に難しく聞こえてしまいますが、通販や動画サイトで「購入する」というボタンの上に矢印のカーソルを持っていく動作、そうあれです。

パソコンに触れる日には、何かしらにマウスオーバーをせずにパソコンを閉じてしまうなんて方はいないと言えるくらいのすごく基本的な動作ですね。

　参考書籍

以下の書籍を参考にさせていただきました。

見た目の高級感で選びました。

まだ、全てのページに目を通していないのですが、テキスト、図解バランスよく配置されていて第１印象良いです。

しばらくお世話になります。

¥2838円(本)
¥2554円(kindle)
　※amazon 2022/01/10現在

1.実行結果（マウスオーバー）

説明するよりも実践したほうがわかりやすいと思うので、以下に私が今回実装したjQueryによるマウスオーバー時の文字色の変化です。

「[–カーソルを合わせてみてね–]」と書いてあるところまでマウスを持って行き、カーソルを合わせてみてください。

　ソースコード

 <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: ”

と記述しています。

これはマウスアウトした時に色を空白にする、つまり元の色に戻すという動作になります。

これによって、マウスのカーソルを合わせたり離したりするたびに色が変化するというわけです。

最後に