Hover doesn't work on layered element - html

Question

I have divs with the same size on the same position. However they don't have a background so you don't see that the elements are in different containers.
The problem I have right now is that the hover event is only triggered on the element in the last container because it is layered on top of the other ones.
#main {
background: yellow;
width: 300px;
height: 300px;
position: absolute;
left: 30px;
top: 30px;
z-index: 1;
}
.out {
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
background: none;
z-index: 5;
}
.in {
position: absolute;
width: 40px;
height: 40px;
z-index: 10;
opacity: 0.5;
}
.out:nth-of-type(1) .in {
top: 40px;
left: 40px;
background: green;
}
.out:nth-of-type(2) .in {
top: 120px;
left: 120px;
background: red;
}
.out:nth-of-type(3) .in {
top: 200px;
left: 200px;
background: blue;
}
.in:hover {
opacity: 1.0;
}
<div id="main">
<div class="out">
<div class="in">DIV 1</div>
</div>
<div class="out">
<div class="in">DIV 2</div>
</div>
<div class="out">
<div class="in">DIV 3</div>
</div>
</div>
Is it possible to force the hover event or do I have to put all the elements into the same container (which would be possible but not that good on the original website)?
I know that the explanation is not the best, but I think with the code you should understand. JSFiddle

Answer 1

I fixed it by adding pointer-events: none; to .out and pointer-events: auto; to .in. HTH !

Answer 2

I would put them in the same container if that is possible as you say.
Sorry I couldn't just comment to say that.

Answer 3

You can you put all these into the same parent element (.out) and use the :nth-child() selector to get the different colors and positions. Then the hover works:
#main {
background: yellow;
width: 300px;
height: 300px;
position: absolute;
left: 30px;
top: 30px;
z-index: 1;
}
.out {
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
background: none;
z-index: 5;
}
.in {
position: absolute;
width: 40px;
height: 40px;
z-index: 10;
opacity: 0.5;
}
.out .in:nth-child(1) {
top: 40px;
left: 40px;
background: green;
}
.out .in:nth-child(2) {
top: 120px;
left: 120px;
background: red;
}
.out .in:nth-child(3){
top: 200px;
left: 200px;
background: blue;
}
.in:hover {
opacity: 1.0;
}
<div id="main">
<div class="out">
<div class="in">DIV 1</div>
<div class="in">DIV 2</div>
<div class="in">DIV 3</div>
</div>
</div>