悬停效果会立即影响它们，而不是单独影响它们-Hovereffectisaffectingthemallatonce,notindividually

I have been looking through for the cause of my problem and I haven't had any luck finding anything. I'm not entirely sure if this is my own stupidity or just purely lack of knowledge.

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

I don't know a lot about coding and I've had a super long day so I may have over looked something. Here is a basic idea of what I'm trying to do.

我对编码知之甚少，而且我度过了漫长的一天，所以我可能已经看了一些东西。这是我想要做的基本想法。

I want a list of 5 options, and they all have a block under the window so when rolled over it shows this block. (indicated by colour)

我想要一个包含5个选项的列表，它们在窗口下都有一个块，所以当滚动时它会显示这个块。 （以颜色表示）

Now what I've created when rolled over they all show up, why is this?

现在，我所创建的东西都会显示出来，为什么会这样呢？

Here is the example of what I've created

这是我创造的例子

HTML

HTML

    
Forest

    

    



    
Storm

    

    



    
Winter

    

    



    
Dusk

    

    



    
ocean

    

    

CSS

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

的jsfiddle

2 个解决方案

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