input属性にもJqueryのロールオーバーを… | φ(..)メモとして残しておこう…

input属性にもJqueryのロールオーバーを…

/*IMGフェードアウトJS*/
$(document).ready(function (){
$("p.jquery-hover").fadeTo(0,1.0);
$("img.jquery-hover").hover(function ()
{
$(this).fadeTo(500, 0.6);
// マウスオーバーで透明度を60%にする
},
function ()
{
$(this).fadeTo(500, 1.0);
// マウスアウトで透明度を100%に戻す
});
});

たとえば、こんなかんじのスクリプトでimg要素に「class="jquery-hover"」を入れてロールオーバーを実装していたとする。
毎回毎回「class="jquery-hover"」を書くのがめんどくさいし、「input」属性にもロールオーバーを適用したいので、変更。

$("img.jquery-hover").hover(function ()

$('img,input[type=image]').hover(function ()

これだけで、img要素とinput要素のタイプが画像だったとき、自動的にロールオーバーを行なってくれる。

jquery-1.4.4.min.jsを読み込んでおくのを忘れないように。