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


このように、onMouseoverとonMouseoutを使うのが一般的です。
だけど、確かjQueryで一気に両方の処理を書けたはずなんだけど、、、。
と思って探すと、hoverイベントがありました。
コレです。

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

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

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


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

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

いちいちonMouseoverとonMouseoutを書くことに比べれば、だいぶ楽です。
が、しかし、はまりました……。
Related Posts
Category: JavaScript
Theme: HP作成
Genre: コンピュータ
Tag:

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

Leave a Reply

* less than 16 characters
* less than 24 characters
* less than 16 characters

Trackback