html - 更改一张图片的上边距会移动同一容器内的所有图片

Question

我有几个链接/图片并排放在一个容器中。容器将其溢出属性设置为 overflow: hidden 并且使用 margin-top: -50px; 将图像“下沉”到容器中。

当用户将鼠标悬停在链接上时，我希望图像从容器中滑出，当用户悬停在链接上时，图像会跳回。

Here is a demo of what I have currently.

这是我的 css(我会把它全部贴出来以防其他地方出现问题)

html, body {
    width:100%;
    height: 100%;
    margin:0;
    padding:0;
}
#w {
    display:table;
    width: 100%;
    height: 100%;
}
#iw {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    width: 100%;
}
#iiw {
    border-top: 1px solid #000;
    height: 125px;
    overflow: hidden;
}
#iiw a {
     margin-left: 8px;
     margin-right: 8px;   
}
#iiw a img {
    margin-top: -50px;
    height: 100px;
    -moz-box-shadow:0 0.8em 1em #444;
    -webkit-box-shadow:0 0.8em 1em #444;
    -o-box-shadow:0 0.8em 1em #444;
    box-shadow:0 0.8em 1em #444;
    -moz-border-radius:0 0 10px 20px;
    -webkit-border-radius:0 0 10px 20px;
    -o-border-radius:0 0 10px 20px;
    border-radius: 0 0 10px 20px;

}

和 html HTML 标记是

<div id="w">
    <div id="iw">
        <div id="iiw">
            <a href="#">
                <img src="http://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png" />
            </a>
            <a href="#">
                <img src="http://programmers.stackexchange.com/content/programmers/img/apple-touch-icon.png" />
            </a>
        </div>
    </div>
</div>

我现在正在使用 JQuery 来处理悬停事件(为了便于使用)，但是最终产品将没有 JQuery(所以不要对 JQuery 代码发表评论 )

---

编辑 我意识到我遗漏了那段代码..哎呀。非常简单的东西。只是用它来交换 margin-top 属性

$("a").hover(function() {
    $(this).children().css("margin-top", "-2px");
}, function() {
    $(this).children().css("margin-top", "-50px");
});

Answer 1

#iiw a {
    display: block;
    float: left;
}  

a 标签需要是 block 级的。