徘徊（）。不适用于 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);
    });
});

Here's 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 或find("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);
    });
});