jQueryでマウスのカーソルが乗った時と離れた時にcssを変更する

今回は、jQueryでマウスのカーソルが乗った時と離れた時の表示を切り替える「.hover()」メソッドを実装。
前記事「jQueryでマウスのカーソルが乗った時・離れた時の表示を切り替える」では、「.mouseenter()」メソッドと「.mouseleave()」メソッドを使いました。実はこの2つを記述しなくても、マウスのカーソルが乗った時と離れた時の動作をセットで指定できる便利なイベント「.hover()」メソッドを知ったので備忘録。
前記事と同じく、今回も内容はボタンのcssを変更するイメージで作りました。
動作は同じですが、「.hover()」メソッドのほうがプログラムコードすっきりです。マウスのカーソルが乗った時と離れた時の動作を一緒にプログラムするときに使えます。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。

今回の内容

STEP1.マウスのカーソルが乗ったと離れた時にcssを変更する。
マウスがあたったとき表示を変える

スポンサーリンク
スポンサーリンク




STEP1-1.要素を画面に作成する

それでは要素であるボタンを画面に表示させます。
ボタンにはidを指定します。idなので、それぞれ別の名前をつけます。
次の画像はボタンにidを指定している例です。↓
ボタンのidを指定例

後ほど記述するjQueryでどの要素にイベントを発生させるか決めるためにボタンにidを指定します。
ボタンにidを直接指定しているのは、「.hover()」メソッドも「.mouseenter()」メソッドと「.mouseleave()」メソッド同様に指定した要素にのみ動作するからです。(子要素には効かないんです。)
ボタンに記述しているclassは装飾です。一時的なものなのでcssもhtmlファイル内に書いています。
それでは以下、htmlファイルの中身です。

・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}
.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;
}
</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>
<img src="./img/pic17-1.jpg" alt="画像" class="img-responsive">
</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. マウスのカーソルが乗ったと離れた時にcssを変更する

jQueryで画面に表示されているボタンにマウスのカーソルが乗った時と離れた時に、ボタンの背景色を切り替えるイベントを動作させていきます。
ここで『.hover()』メソッドを使います。
マウスのカーソルが乗った時に背景色を変化、マウスのカーソルが離れた時に元の色(今回は白)になる動作をさせます。
さっそく、以下の内容を「sample.js」に記述します。

//マウスが乗った時、ボタンの背景色が変わる
//マウスが離れた時、ボタン背景色が戻る
$(function(){
$('#b-a').hover(function(){
$('#b-a').css('background','#C8E6C9');
},function(){
$('#b-a').css('background','#FFFFFF');
});
$('#b-b').hover(function(){
$('#b-b').css('background','#FFCCBC');
},function(){
$('#b-b').css('background','#FFFFFF');
});
$('#b-c').hover(function(){
$('#b-c').css('background','#FFF9C4');
},function(){
$('#b-c').css('background','#FFFFFF');
});
}); 

どうですか?
次の画像みたいにボタンの表示が変化していたらOKです。
※ボタンの表示が変化しない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
マウスがあたったとき表示を変える

今回の動作確認用にデモサイトを準備しました。
よかったら画像をクリックしてデモサイトで動作確認してみてください。↓

「jQueryでマウスのカーソルが乗った時と離れた時にcssを変更する」のデモサイト

デモサイト

スポンサーリンク
スポンサーリンク




シェアする

フォローする

スポンサーリンク
スポンサーリンク