I’ve fixed your problem by adding pointer-events: none;
to the absolute block.
body {
margin: 0;
padding-left: 10px;
font: 20px Arial, sans-serif;
line-height: 30px;
}
a:hover {
color: red;
}
#overlay-blocking,
#overlay-passing{
position: absolute;
height: 30px;
width: 10em;
left: 0;
}
#overlay-blocking {
top: 30px;
background: rgba(0,100,0, .2);
pointer-events: none;
}
#overlay-passing {
top: 0;
background: rgba(100,0,0, .2);
}
<a href="#">Link blocked</a><br>
<a href="#" title="hoverable">Link available</a><br>
<a href="#" title="hoverable">Link available</a><br>
<div id="overlay-blocking"></div>
<div id="overlay-passing"></div>