Question

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

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

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

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

以下是我创建的例子

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;
}

小提琴：http://jsfiddle.net/u3ssV/

P.S。另外，您可以将内容包装在容器中，并将溢出设置为隐藏.. 或者我仍然不明白（？）：）

Answer 2

您正在将：悬停效果应用于.sound，即应用于所有块的类。因此，当它触发任何一个项目时，整个类都会受到影响，并且使用该类的所有块都会发生变化。

尝试id（由css中的#idName标识）来单独处理它们。也许有一种更好的方法可以通过类来隔离我不知道的变化。

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

2 个答案: