hover（）。 Firefoxのボタン要素内の画像では機能しません

Question

私はホバー上で画像を変更するスクリプトを持っています。 ボタン要素内に画像がある場合を除いて、Mozillaのすべての画像で機能します。それはIEでうまく動作します。ここで

機能です：

$('.button').each(function(){ 
    var imgFile = $(this).attr('src') ; 
    var preloadImage = new Image(); 
    var imgExt = /(\.\w{3,4}$)/; 
    preloadImage.src = imgFile.replace(imgExt, '_over$1'); 
    $(this).hover(function(){ 
     $(this).attr('src', preloadImage.src); 
    }, function(){ 
     $(this).attr('src', imgFile); 
    }); 
}); 

ここでのHTML：

<div class='preview_bottom'> 

<div class='bold'> 
If you are ready<br> to submit: <br> 

<form action="index.php?p=submit" method="post"> 
<p> 
<button type="submit" name="submit"><img src="images/submit.jpg" alt="" class="button"/> </button> 
<input type="hidden" name="submitted2" value="TRUE"> 
</p> 
</form> 
</div> 

<div class='bold'> 
If you need to make any changes before submitting: <br> 

<form action="index.php?p=preview" method="post"> 
<p> 
<button type="submit" name="changeorder" ><img src="images/change.jpg" alt="" class="button"/></button> 
</p> 
</form> 
</div> 

</div> 

いくつかのいずれかが、それはFFで動作させるために私を助けることができますか？私はfirst-childを使ってみましたが、button要素の中でイメージを選択するために "img"を見つけましたが、それは全く機能しません。

Answer 1

これを試してみてください：

$('button').each(function(){ 
    var imgFile = $('.button',this).attr('src') ; 
    var preloadImage = new Image(); 
    var imgExt = /(\.\w{3,4}$)/; 
    preloadImage.src = imgFile.replace(imgExt, '_over$1'); 
    $(this).hover(function(){ 
     $('.button',this).attr('src', preloadImage.src); 
    }, function(){ 
     $('.button',this).attr('src', imgFile); 
    }); 
});