jQueryでマウスカーソルが乗ってる間だけボタンの見た目を変える方法/hoverイベントの使い方

CSSなどと同じようにhoverイベントでマウスが乗っている間の挙動を決めますが、jQueryの場合はセットで「カーソルが外れたとき」も一緒に記述することができます。CSS側で:hoverで指定するほうがシンプルかつ速いので、必然性がなければそちらを使うことをおすすめします。

hoverイベントの使い方

同じイベントのくくりで、クリックした時に処理を実行するclickイベントと書き方は大体同じです。ただし、hoverの場合は引数をふたつ書くことに注意してください。

実際に作ってみましょう。
ボタン

$('#text-color').hover(function(){
//マウスカーソルが乗った時
$(this).css('color','blue');
},
function(){
//マウスカーソルが外れた時
$(this).css('color','black');
});

$(this).cssというのは、イベントを設定した要素（this）のcssを変更するjQueryのメソッド（cssメソッド）です。thisとすることで、仮に同じクラスが複数あってもクリックされた要素だけに処理を実行することができます。
cssメソッドの引数の中で、colorプロパティの値をhover時は青に、外れた時は黒に指定しています。CSSをいじってhover時の挙動を書く場合はこのバリエーションです。背景色を変更する場合はbackground-colorを変更し、透明度を変更する場合はopacityを変更することで実装できます。もちろん、ボタンのサイズや影の大きさを変更することもできます。

$('#back-color').hover(function(){
$(this).css('background-color','#878787');
$(this).css('color','white');
$(this).css('opacity','1');
},
function(){
$(this).css('background-color','#e5e5e5');
$(this).css('color','black');
$(this).css('opacity','0.5');
});

hover時に画像を別のものに差し替えたい場合、attrメソッドを使うことでsrc属性を変更する方法が、おそらく最も素直な画像の変更方法です。attrの後にsrc属性を指定、その次に変更したい画像のURL/ファイル名を記入します。こちらはcssではなく、htmlを変更しています。

$('#back-image').hover(function(){
$(this).attr('src','.../bt2.jpg');
},
function(){
$(this).attr('src','.../bt1.jpg');
});

cssメソッドでbackground-imageを変更しても可能です。transitionをかけて、ゆっくり画像が変更されるようにしてみました。

$('#bcg').hover(function(){
$(this).css('background-image','url(".../bt2.jpg")');
},
function(){
$(this).css('background-image','url(".../bt1.jpg")');
});

もっと大掛かりに変更したい場合は、クラスごとaddClassとremoveClassで付け外しする方法がいいかもしれません。