html - 悬停效果会同时影响他们，而不是单独影响他们

Question

我一直在寻找我的问题的原因，但我没有找到任何运气。我不确定这是我自己的愚蠢还是纯粹缺乏知识。

我对编码知之甚少，而且我度过了漫长的一天，所以我可能看漏了一些东西。这是我正在尝试做的事情的基本想法。

我想要一个包含 5 个选项的列表，它们在窗口下方都有一个方 block ，所以当滚动到它时会显示这个方 block 。 (用颜色表示)

现在滚动时我创建的内容都显示出来了，这是为什么？

这是我创建的例子

HTML

<div id="nature">
<a class="sound">
    <h4>Forest</h4>

    <div class="preview" style="background:red;">
    </div>
</a>

<a class="sound">
    <h4>Storm</h4>

    <div class="preview"style="background:blue;" >
    </div>
</a>

<a class="sound">
    <h4>Winter</h4>

    <div class="preview"style="background:lightblue;" >
    </div>
</a>

<a class="sound">
    <h4>Dusk</h4>

    <div class="preview"style="background:pink;" >
    </div>
</a>

<a class="sound">
    <h4>ocean</h4>

    <div class="preview"style="background:yellow;" >
    </div>
</a>

</div>

CSS

#nature {
    width: 100%;
    position: absolute;
    margin: 0;
    padding: 0;
    bottom: 0;
    left: 0;
}
.sound {
    margin: 0;
    padding: 0;
    width: 20%;
    height: 130px;
    display: inline-block;
    float: left;
    background: green;
    cursor: pointer;
    transition: .5s;
    -webkit-transition: .5s;
    margin-bottom: -50px;
}
.sound:hover {
    margin-bottom: 0;
}
.sound .preview {
    height: 50px;
    width: 100%;
    overflow: hidden;
    clear: both;
    margin: 50px 0 0 0;
}

JSFiddle

Answer 1

最简单的方法；

#nature > a {
  position: relative;
}
.sound {
bottom:-50px;
}
.sound:hover {
bottom:0;
}

fiddle :http://jsfiddle.net/u3ssV/

附注另外，您可以将您的内容包装在溢出设置为隐藏的容器中。或者我仍然不明白这一点 (?) :)