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); 
    }); 
});