jquery - 工作动画被轴边界打破了吗？

Question

我在 Photoshop 中重新创建了 Google map 图标，并有一个副本，当围绕两者的链接悬停时，我想用它代替当前图像。我使用 position: absolute 将两个 img 堆叠在一起，并使用容器将其放置在我喜欢的位置。然而，即使容器的 css 中有 overflow: 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>

CSS

.links_ct {
    width: 45px;
    height: 45px;
    margin: 15px 10px 15px 0;
    overflow: hidden;
}

.front, .back {
    display: block;
    width: 45px;
    height: 45px;
    position: absolute;
}

.back {
    left: -45px;
    float: left;
    z-index: 500;
}

.front {
    z-index: 200;
}

JQUERY

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

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

基本上，它的动画效果很好，但在页面的完全错误的一侧。

Answer 1

刚刚意识到我忘记将 position: relative 添加到容器中……糟糕。