以下是代码:
$(".image").hover(
function() {
$(this).animate({ height: "100", width: "100"}, "fast");
$("image-two").css("z-index", "-1");
}, function() {
$(this).animate({ height: "50", width: "50"}, "fast");
$("image").css("z-index", "0");
}
);
$(".image-two").hover(
function() {
$(this).animate({ height: "100", width: "100"}, "fast");
$("image").css("z-index", "-1");
}, function() {
$(this).animate({ height: "50", width: "50"}, "fast");
$("image").css("z-index", "0");
}
);
<div class="main">
<img src="../images/templateone.png" class="image" alt=""/>
<img src="../images/templatetwo.png" class="image-two" alt=""/>
<script src="../javascript/gallery.js"></script>
</div>
.image {
position: relative;
width: 50px;
height: 50px;
}
.image-two {
position: relative;
width: 50px;
height: 50px;
}
这里的要点是让一个盒子在另一个盒子上展开而不会相互移动。我知道z-index需要定位,但position: relative;
似乎不适合我。 Z-index对我来说总是有点灰色,但是我想弄明白。我是否必须使用绝对定位或我只是做错了什么?提前谢谢。
答案 0 :(得分:1)
在这种情况下,您必须使用position:absolute
,并使用适当的z-index检查http://jsfiddle.net/tbHDt/1/
答案 1 :(得分:0)
是使用绝对定位并为图像二的左侧设置动画。图像的左侧默认为0,两者的顶部也是如此。
.image {
position: absolute;
width: 50px;
height: 50px;
}
.image-two {
position: absolute;
left: 55px;
width: 50px;
height: 50px;
}
$(".image-two").hover(
function() {
$(this).animate({ height: "100", width: "100", left:"5"}, "fast");
$("image").css("z-index", "-1");
}, function() {
$(this).animate({ height: "50", width: "50", left: "55"}, "fast");
$("image").css("z-index", "0");
}
);