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

徘徊（）。不适用于Firefox中按钮元素内的图像

1 个答案: