Question

当我将鼠标悬停在两个图像上时，我希望切换它们。两个图像具有相同的尺寸并且是一致的。

问题是当图像发生变化时，它会“跳跃”并且比默认图像小，尽管HTML和CSS不会改变且图像尺寸相同。怎么来的？

我有以下 HTML ：

<img src="image.png" class="image" />

jQuery脚本：

<script  type='text/javascript'>
    $(document).ready(function(){
        $(".image").hover(
            function() {$(this).attr("src","image-hover.png");}, 
            function() {$(this).attr("src","image.png");
        });
    });
</script>

有人可以给出一些建议或暗示为什么会这样吗？ 我不是在寻找CSS替代品，我想让它与jQuery一起使用！

Answer 1

我找到了一个不错的解决方案，尽管我还没有解决原来的问题。但时间很短，不是吗？

http://jsfiddle.net/Xm2Be/3/

$('.fader').hover(function() {
    $(this).find("img:last").fadeToggle();
});

发现于： jQuery Hover image change animation

jQuery悬停效果：图像变小

1 个答案: