今回は、jQueryでマウスのカーソルが乗った時と離れた時の表示を切り替える「.mouseenter()」メソッドと「.mouseleave()」メソッドを使って実装。
前記事「jQueryで要素を消したいならremoveメソッドを使おう」までには、イベントを起こす「.click()」メソッドがたくさん登場してきました。そこでもう少し他のイベントも知っていこうということで、マウスのカーソルが乗った・離れた時にボタンの背景色を変えるもの、マウスのカーソルが乗った・離れた時に画像を変えるものに仕上げたので備忘録。
何気なく「使いやすいな」と感じるwebサイトでは、マウスのカーソルで表示を変化させて自分がどこを指しているのかがわかりやすくなってますよね。
そのようなwebサイトでよく見かけるボタンや画像の変化をさせたいときに、「.mouseenter()」メソッドと「.mouseleave()」メソッドを使えそうです。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
今回の内容
STEP1.マウスのカーソルが乗った・離れた時にボタンの背景色を切り替える。
↓
STEP2. マウスのカーソルが乗った・離れた時に画像を切り替える。
STEP1-1. 要素を画面に作成する
まずは要素であるボタンや画像を画面に表示させます。
ボタンにidを指定します。
次の画像はボタンにidを指定している例です。↓
後ほど記述するjQueryでどの要素にイベントを発生させるか決めるためにボタンにidを指定します。また、idをボタンに直接指定しているのは指定した要素にのみ動作するからです。(子要素には効かないんです。)
ボタンに記述しているclassは装飾です。一時的なものなのでcssもhtmlファイル内に書いています。それでは以下、htmlファイルの中身です。
・・・・・cssの部分です・・・・・ <style> body{ font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif; } p{ margin-top:20px; } .bdecoa{ border: 5px solid #4CAF50; margin: 0 10px 20px 0; padding: 10px 25px 10px 25px; background-color: #FFFFFF; } .bdecob{ border: 5px solid #FF5722; margin: 0 10px 20px 0; padding: 10px 25px 10px 25px; background-color: #FFFFFF; } .bdecoc{ border: 5px solid #FFEB3B; margin: 0 10px 20px 0; padding: 10px 25px 10px 25px; background-color: #FFFFFF; } .bdecoa .bdecob .bdecoc a:link{ color: #000000; } .text{ padding-left: 30px; } </style> ・・・・・省略。htmlの部分です・・・・・ <div class="container"> <button class="bdecoa" id="b-a">ボタンA</button> <button class="bdecob" id="b-b">ボタンB</button> <button class="bdecoc" id="b-c">ボタンC</button> <div class="row"> <div class="col-md-6"><img src="./img/house1.jpg" alt="カーソルが離れているときの画像" ></div> <div class="col-md-6 text">左の画像にカーソルを乗せると、画像が切り替わります。<br> 左の画像からカーソルを話すと、画像が戻ります。<br> どうでしょうか。</div> </div> </div>
ここまでだと、次の画像のように表示されている状態になっていると思います。↓
要素を表示する画面が作成できたら、続いてjQueryを記述するファイルを作っていきます。
jQueryは別ファイルに記述することが多いのでhtmlファイルからjsファイルを参照するようにします。今回はjsファイルの名前を「sample.js」として、以下をbodyの閉じタグ前に記述します。
・・・・・省略・・・・・ <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="sample.js"></script> </body>
STEP1-2. マウスのカーソルが乗った・離れた時にボタンの背景色を切り替える
jQueryで画面のボタンにマウスのカーソルが乗った時と離れた時に、ボタンの背景色を切り替えるイベントを動作させていきます。
ここで『.mouseenter()』メソッドと『.mouseleave()』メソッドを使っていきます。
マウスのカーソルが乗った時の動作は『.mouseenter()』メソッド、マウスのカーソルが離れた時の動作を『.mouseleave()』メソッドで作ります。
マウスのカーソルが乗った時に背景色を変化、マウスのカーソルが離れた時に元の色(今回は白)になるようにしています。
以下の内容を「sample.js」に記述します。
//マウスが乗った時、ボタンの背景色が変わる //マウスが離れた時、ボタン背景色が戻る $(function(){ $('#b-a').mouseenter(function(){ $('#b-a').css('background','#C8E6C9'); }); $('#b-a').mouseleave(function(){ $('#b-a').css('background','#FFFFFF'); }); $('#b-b').mouseenter(function(){ $('#b-b').css('background','#FFCCBC'); }); $('#b-b').mouseleave(function(){ $('#b-b').css('background','#FFFFFF'); }); $('#b-c').mouseenter(function(){ $('#b-c').css('background','#FFF9C4'); }); $('#b-c').mouseleave(function(){ $('#b-c').css('background','#FFFFFF'); }); });
どうですか?
次の画像みたいにボタンの表示が切り替わったらOKです。
※ボタンの表示が切り替わらない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
STEP2-1. 表示を切り替える画像にidを指定する
STEP1-1で記述した画像にマウスのカーソルが乗った時に表示を切り替えるためにidを指定していきます。
ここでのポイントは、表示を切り替えたい画像に直接idを指定することです。
前述同様に指定した要素にのみ動作するため、直接idを指定します。
それでは以下、画像にidを指定しただけですがhtmlファイルの中身です。↓
・・・・・cssの部分です・・・・・ <style> body{ font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif; } p{ margin-top:20px; } .bdecoa{ border: 5px solid #4CAF50; margin: 0 10px 20px 0; padding: 10px 25px 10px 25px; background-color: #FFFFFF; } .bdecob{ border: 5px solid #FF5722; margin: 0 10px 20px 0; padding: 10px 25px 10px 25px; background-color: #FFFFFF; } .bdecoc{ border: 5px solid #FFEB3B; margin: 0 10px 20px 0; padding: 10px 25px 10px 25px; background-color: #FFFFFF; } .bdecoa .bdecob .bdecoc a:link{ color: #000000; } .text{ padding-left: 30px; } </style> ・・・・・省略。htmlの部分です・・・・・ <div class="container"> <button class="bdecoa" id="b-a">ボタンA</button> <button class="bdecob" id="b-b">ボタンB</button> <button class="bdecoc" id="b-c">ボタンC</button> <div class="row"> <div class="col-md-6"><img src="./img/house1.jpg" alt="表示を切り替える画像" id="pic"></div> <div class="col-md-6 text">左の画像にカーソルを乗せると、画像が切り替わります。<br> 左の画像からカーソルを話すと、画像が戻ります。<br> どうでしょうか。</div> </div> </div>
STEP2-2. ボタンをクリックしたときに要素を削除する
jQueryでマウスのカーソルが乗った時と離れた時に画像の表示を切り替えていきます。
STEP2-1でも登場した『.mouseenter()』メソッドと『.mouseleave()』メソッドを再度使います。
以下の内容をSTEP2-1で記述したプログラムの下に「sample.js」へ記述します。
//マウスが乗った時、ボタンの背景色が変わる //マウスが離れた時、ボタン背景色が戻る $(function(){ $('#pic').mouseenter(function(){ $('#pic').attr('src','./img/house2.jpg'); }); $('#pic').mouseleave(function(){ $('#pic').attr('src','./img/house1.jpg'); }); });
どうですか?
次の画像みたいにマウスのカーソルが乗った時と離れた時で画像の表示が切り替わったらOKです。
※画像の表示が切り替わらない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイトを準備しました。
よかったら画像をクリックしてデモサイトで動作確認してみてください。↓