Make overlapping div “not clickable” so that content below can be accessed?

Question

I am using a JPG overlay with a reduced opacity for an effect, however I want it as an effect only and make the content below that div clickable. Is that possible, thanks :)

Answer 1

No, it's not. The overlaying element will always intercept the click. One possible workaround is to bind a click event to the overlaying element, and then get the current mouse position & compare that to the position of the element underneath in order to determine whether or not that element should register a click. But chances are there is a much better way of accomplishing this. Without seeing your code, however, I have no way of knowing.