I have been searching tirelessly for the root of my issue but so far, I've come up empty-handed. It's possible that it's due to my lack of knowledge rather than any personal shortcomings.
Coding isn't my forte and after a long day, it's likely I may have missed something crucial. Here's a brief overview of what I'm attempting to achieve.
I want to create a list of 5 options, each with a block underneath that is revealed when hovered over (indicated by color).
The problem I'm facing is that all blocks are showing up on hover, which shouldn't be happening.
Below is an example of what I've put together:
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;
}