CSS Hover does not work in absolute positioned element hierarchy
I am creating a small prototype for a slider that can have multiple scenes, and where each scene can have multiple annotated steps. The user can switch between scenes by dragging the mouse up and down, and between steps in a scene by scrolling the mouse. The code for a small prototype (tested in Chrome) can be found at: http://jsfiddle.net/eoh59vs8/
HTML:
<div id="storyContainer">
<div class="sceneContainer">
<div class="stepContainer">
<img alt="Scene 1 - Step1" style="background-color: #014CB6"/>
<a class="annotationPoint" style="top:20px; left:50px">111</a>
<a class="annotationPoint" style="top:20px; left:120px">112</a>
</div>
<div class="stepContainer">
<img alt="Scene 1 - Step2" style="background-color: #00bfff"/>
<a class="annotationPoint" style="top:80px; left:50px">121</a>
<a class="annotationPoint" style="top:80px; left:120px">122</a>
</div>
<div class="stepButtonsContainer">
<span class="stepButton active"></span>
<span class="stepButton"></span>
</div>
</div>
<div class="sceneContainer">
<div class="stepContainer">
<img alt="Scene 2 - Step1" style="background-color: red"/>
<a class="annotationPoint" style="top:150px; left:150px">211</a>
<a class="annotationPoint" style="top:180px; left:180px">212</a>
</div>
</div>
</div>
CSS
#storyContainer {
width: 1031px; height: 580px;
overflow: hidden;
position: relative;
}
.sceneContainer {
border-bottom: solid black thin;
position: relative;
}
.stepContainer {
position: absolute;
opacity: 0;
top: 0; left:0;
}
.stepContainer:first-of-type {
opacity:1;
}
.annotationPoint {
position: absolute;
display: inline-block;
width: 40px;
height: 40px;
}
.annotationPoint:hover {
cursor: pointer;
background-color: gold;
}
The problem is that annotations are not valid. When you play around a bit, it seems like the problem comes from the fact that annotations are contained in a hierarchy of absolutely positioned elements.
My first thought was (as mentioned several times on other similar stackoverflow questions) that there is some problem with z-indices due to the fact that there are many items stacked on top of each other, but I wasn't able to fix that ...
source to share
This is the CSS for your #storyContainer .sceneContainer > .stepContainer
. Here you have installed pointer-events: none;
which disables mouse events for the div and its children. Therefore, elements a
do not fire hover events in the browser.
It has no effect if you remove that CSS, but if you need it, you just need to reset it in CSS for .annotationPoint
any other elements you want to hover, etc.
.annotationPoint
{
pointer-events:initial;
}
source to share