Question

我在Photoshop中重新创建了Google地图图标，并且当两个环绕的链接都悬停在上面时，我想要取代当前图像。我已经使用 position：absolute 将两个img叠放在一起，并使用一个容器将它放在我喜欢的位置。但是，即使容器的css中存在 overflow：hidden ，该位置也会被破坏。

HTML MARKUP

<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

刚才意识到我忘了将位置：亲戚添加到容器中......哎呀。

按轴边界划分的工作动画？

1 个答案: