Jquery 被轴边界破坏的工作动画？

我在Photoshop中重新创建了GoogleMaps图标，并且有一个副本，当环绕这两个图标的链接悬停在上面时，我想用它来代替当前图像。我使用了position:absolute将两个img堆叠在一起，并使用一个容器将其放置在我喜欢的位置。然而，即使在容器的css中使用了溢出：hidden，位置也会被破坏

HTML标记

<div class="links_ct">
    <a class="link" href="#">
        <img class="back" src="files/img/gmaps2.png"/>
        <img class="front" src="files/img/gmaps.png"/>
    </a>
</div>

JQUERY

function head_link_hover() {
    $('.link').hover(function () {
        $('.back').animate({
            left: '+=45px'
        });
    }, function () {
        $('.back').animate({
            left: '-=45px'
        });
    })
}

$(document).ready(function () {
    head_link_hover();
});

---

基本上，它可以正确地设置动画，但是页面完全错误。

刚刚意识到我忘了将位置：relative添加到容器中……哎呀

function head_link_hover() {
    $('.link').hover(function () {
        $('.back').animate({
            left: '+=45px'
        });
    }, function () {
        $('.back').animate({
            left: '-=45px'
        });
    })
}

$(document).ready(function () {
    head_link_hover();
});