jQueryでマウスが乗った時に色や画像を変更する

今回は、jQueryでマウスが乗った時に色や画像の変更を実装。
使っているメソッドは・・・
・ マウスのポインタが乗った時に処理をする『.hover()』
・ cssの追加や変更処理をする『.css()』
・ 条件に一致する要素に対して繰り返し処理をする『.each()』
・ 子孫の要素まで探してくる『.find()』
・ 指定した属性に対して値の追加や変更する『.attr()』
・ 文字列の置換処理をする『.replace()』
以上6つを使ってます。「マウスのポインタが乗った時にcssの色を変更」と「マウスのポインタが乗った時に画像を変更」するものに仕上げたので備忘録。
webサイトのメニューで見かける色が変わるナビゲーションをイメージで作りました。
メニューをcssで作っているか画像で作っているときに使えます。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。

今回の内容

STEP1.マウスのポインタが乗ったときにcssを変更する。
マウスのポインタが乗ったときにcssを変更

STEP2.マウスのポインタが乗ったときに画像を変更する。
マウスのポインタが乗ったときに画像を変更

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




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

まずはリストでメニューを作成します。
ここでのポイントはマウスのポインタが乗ったときに色を変更するために、リストに対してclassを指定することです。
次の画像はリストに対してclass指定している記述例です。
classの記述例

それでは見た目の調整をいれたcssも含め、htmlファイルに記述します。
以下、htmlファイルの中身です。↓

・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}
ul li{
list-style: none;
width: 280px;
float: left;
text-align: center;
background-color: #000000;
margin: 5px;
color: #FFFFFF;
}
ul li a{
color: inherit;
font-weight: bold;
display: block;
padding: 15px;
}
</style>
・・・・・省略。htmlの部分です・・・・・
<div class="container">
<ul>
<li><a href="#" class="menu">Home</a></li>
<li><a href="#" class="menu">Profile</a></li>
<li><a href="#" class="menu">Messages</a></li>
</ul>
<ul>
<li><img src="./img/jq19/color1a.jpg" alt=""></li>
<li><img src="./img/jq19/color2a.jpg" alt=""></li>
<li><img src="./img/jq19/color3a.jpg" alt=""></li>
</ul>
</div>

ここまでだと、次の画像のように表示されている状態になっていると思います。↓
画面を表示

画面が作成できたら、続いてjQueryを記述するjsファイルを作っていきます。
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でマウスのポインタが乗ったときにcssを変更する動作をさせていきます。
ここで『.hover()』メソッド、『.css()』メソッドを組み合わせて使います。
※『.hover()』メソッドについては、過去記事「jQueryでマウスが乗った時と離れた時にcssを変更する」も参考にしてみてください。
※『.css()』メソッドについては、過去記事「ボタンをクリックした時にjQueryでcssを書き換えてみる」も参考にしてみてください。
動作の流れは、
1. 『.hover()』メソッドでマウスのポインタが乗った時と離れた時という動作を指定し、
2. 『.css()』メソッドでcssを書き換える。
といった感じです。
上記に合った動作をさせるためにさっそく、以下の内容を「sample.js」に記述します。

//マウスが乗った時と離れた時に色を切替
$(function(){
var deco1 = {
'color':'#EEFF41',
'text-decoration':'none'
}
var deco2 = {
'color':'#FFFFFF',
'text-decoration':'none'
}
$('.menu').hover(
function(){
$(this).css(deco1);
},function(){
$(this).css(deco2);
}
);
});

どうですか?
次の画像みたいにマウスのポインタが乗った時と離れた時に色が変化していたらOKです。
※色が変化しない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
マウスのポインタが乗ったときにcssを変更

STEP2-1. 表示を切り替える画像にclassを指定する

続いてSTEP1-1で記述した画像にマウスのポインタが乗った時に表示を切り替えるためにclassを指定していきます。
classの記述例

ここでのポイントは、表示を切り替えたい画像にclassを指定することです。
それでは以下、画像にclassを指定しただけですがhtmlファイルの中身です。↓

・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}
ul li{
list-style: none;
width: 280px;
float: left;
text-align: center;
background-color: #000000;
margin: 5px;
color: #FFFFFF;
}
ul li a{
color: inherit;
font-weight: bold;
display: block;
padding: 15px;
}
</style>
・・・・・省略。htmlの部分です・・・・・
<div class="container">
<ul>
<li><a href="#" class="menu">Home</a></li>
<li><a href="#" class="menu">Profile</a></li>
<li><a href="#" class="menu">Messages</a></li>
</ul>
<ul>
<li><img src="./img/jq19/color1a.jpg" alt="" class="image"></li>
<li><img src="./img/jq19/color2a.jpg" alt="" class="image"></li>
<li><img src="./img/jq19/color3a.jpg" alt="" class="image"></li>
</ul>
</div>

STEP2-2. マウスのポインタが乗ったときに画像を変更する

jQueryでマウスのポインタが乗ったときに画像を変更する動作をさせていきます。
ここで『.each()』メソッド、『.find()』メソッド、『.attr()』メソッド、『.replace()』メソッド、『.hover()』メソッドを組み合わせて使います。
※『.each()』メソッドについては、過去記事「jQueryでクリックした時にマス目の色を変更する〔.each( )〕」も参考にしてみてください。
※『.find()』メソッドについては、過去記事「jQueryで指定した要素を取得する〔.find( )〕」も参考にしてみてください。
動作の流れは、
1. 『.each()』メソッドで処理の繰り返しを指定し、
2. 『.find()』メソッドで子孫の要素を探しておく。
3. 2つの変数を作り、1つは『.attr()』メソッドで画像のsrcを指定、もう1つは『.replace()』メソッドで画像のsrcを書き換える内容にする。
4. 実際にマウスのポインタが乗った時は、画像のsrcを書き換え、
5. マウスのポインタが離れた時は、画像のsrcを元に戻す
といった感じです。
上記に合った動作をさせるためにさっそく、以下の内容を「sample.js」のSTEP1-2で記述したプログラムの下に記述します。

//マウスが乗った時と離れた時に画像を切替
$(function(){
$('.image').each(function(){
$(this).find('.image');
var off = $(this).attr('src');
var on = off.replace('a','b');
$(this).hover(function(){
$(this).attr('src',on);
},function(){
$(this).attr('src',off);
});
});
});

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

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

「jQueryでマウスが乗った時に色や画像を変更する」デモサイト

デモサイト

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




シェアする

フォローする

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