HTML/CSS: Make a div "invisible" to clicks?

It can be done using CSS pointer-events. This property is supported in Firefox 3.6+, Chrome 2+, IE 11+, and Safari 4+. Unfortunately, I don't have knowledge of a cross-browser workaround.

#overlay {
  pointer-events: none;
}

It can be done by refiring the event after you temporarily hide the overlay.

See the first answer to this question: HTML "overlay" which allows clicks to fall through to elements behind it