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

Question

我在 Photoshop 中重新创建了 Google 地图图标，并有一个副本，当 link 环绕在两者上时，我想用它代替当前图像。我使用 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 到容器中...糟糕。

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

Working Animation broken by axis boundaries?

jquery

html

css

jquery-animate