我在 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();
});
基本上,它的动画效果很好,但在页面的完全错误的一侧。
最佳答案
刚刚意识到我忘记将 position: relative 添加到容器中……糟糕。
关于jquery - 工作动画被轴边界打破了吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29159128/