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工作？我試過使用第一個孩子或找到（「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); 
    }); 
});