Make overlay background click-through-able

Question

Is there a way, in CSS, I can make an element click-through-able. I have an absolutely positioned <div> covering a link. I'd like to be able to click the link through the overlay <div>. The overlay has a mostly transparent background, and the link has no covering pixels.

I've tried background: url('...') transparent, but to no avail.

Here is a JSFiddle demonstrating my problem. The link can be clicked in IE8, but not in FireFox. What I want to do is make an image ticker in the #underlay div. The overlay is so that I can have a background with a gradient from solid to transparent on the bottom and top, so I can make the images sort of 'scroll into nothing', without fading the entire image out at once, if this makes sense (if anyone has an android phone, try scrolling your memos and watch the top/bottom of the screen - the memos fade into nothing).

Answer 1

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>