Make overlay background click-through-able [duplicate]

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>

Answer 2

I don't think it is possible, because an image is still a complete box. But have you tried these Image Maps? Seems like that's what you want.

OTHER OPTION

You could also seperate your image into 2, and make sure that your boxes are not overlaying your link of course.

Answer 3

Perhaps this answer would be of some use to you, if you can nest the overlay inside the link: With only CSS, is it possible to trigger :hover and click events underneath an element?