jQueryでonMouseoverとonMouseoutを同時に設定する

Date:2008/06/28 09:42

jQueyメモ。

マウスをある画像の上に乗せたら画像が変わる（大きくなる、色が変わる etc.）、マウスを外すと元に戻る、という処理がよくあります。

通常は、こんな風に書くはず。
（id#mntoggle の background-imageを変更する）

<div id='mntoggle' onMouseover='
document.getElementById("mntoggle").style.backgroundImage
  = "url(画像１.jpeg)";'
onMouseout='
document.getElementById("mntoggle").style.backgroundImage
  = "url(画像２.jpeg)";'>
divの中身</div>

このように、onMouseoverとonMouseoutを使うのが一般的です。
だけど、確かjQueryで一気に両方の処理を書けたはずなんだけど、、、。

と思って探すと、hoverイベントがありました。
コレです。

$("要素名とかIDとか").hover(処理１,処理２);

「処理１」が最初がマウスが重なった時に呼び出される関数、
「処理２」がマウスが離れた時に呼び出される関数です。

$("#mntoggle").hover(function(){
document.getElementById("mntoggle").style.backgroundImage
  = "url(画像１.jpeg)";'
},
function(){
document.getElementById("mntoggle").style.backgroundImage
  = "url(画像２.jpeg)";
}
);

jQueryっぽく、もっとスマートに書くとすれば以下の通り。

$("#mntoggle").hover(function(){
$(this).css("background-image", "url(画像１.jpeg)");
},
function(){
$(this).css("background-image", "url(画像２.jpeg)");
}
);

いちいちonMouseoverとonMouseoutを書くことに比べれば、だいぶ楽です。