HTML “overlay” which allows clicks to fall through to elements behind it [duplicate]


HTML “overlay” which allows clicks to fall through to elements behind it [duplicate]

This question already has an answer here:

HTML/CSS: Make a div “invisible” to clicks?

5 answers

I’m trying to overlay a element on top of a webpage (to draw arbitrary graphics), and I’ve come to the point where I can stack it inside of a element on top of everything, but this prevents the user from clicking on any links/buttons/etc.
Is there a way to have its content float on top of everything (it’s semi-transparent, so you can still see what is behind) and have the user interact with the layer below it?
I’ve found a lot of information on the DOM event model, but none of it addresses the problem where the buttons and other “native” controls never seem to get the clicks in the first place.


Solution 1:

A silly hack I did was to set the height of the element to zero but overflow:visible; combining this with pointer-events:none; seems to cover all the bases.

.overlay {
    background:none !important;

Solution 2:

Add pointer-events: none; to the overlay.

Original answer: My suggestion would be that you could capture the click event with the overlay, hide the overlay, then refire the click event, then display the overlay again. I’m not sure if you’d get a flicker effect though.

[Update] Exactly this problem and exactly my solution just appeared in this post: “Forwarding Mouse Events Through Layers“. I know its probably a little late for the OP, but for the sake of somebody having this problem in the future, I though I would include it.

Solution 3:

For the record an alternative approach might be to make the clickable layer the overlay: you make it semi-transparent and then place the “overlay” image behind it (somewhat counterintuitively, the “overlay” image could then be opaque). Depending on what you’re trying to do, you might well be able to get the exact same visual effect (of an image and a clickable layer semi-transparently superimposed on top of each other), while avoiding clickability problems (because the “overlay” is in fact in the background).

Solution 4:

In case anyone else is running in to the same problem, the only solution I could find that satisfied me was to have the canvas cover everything and then to raise the Z-index of all clickable elements. You can’t draw on them, but at least they are clickable…

Solution 5:

My team ran into this issue and resolved it very nicely.

  • add a class “passthrough” or something to each element you want clickable and which is under the overlay.
  • for each “.passthrough” element append a div and position it exactly on top of its parent. add class “element-overlay” to this new div.
  • The “.element-overlay” css should have a high z-index (above the page’s overlay), and the elements should be transparent.

This should resolve your problem as the events on the “.element-overlay” should bubble up to “.passthrough”. If you still have problems (we did not see any so far) you can play around with the binding.

This is an enhancement to @jvenema’s solution.

The nice thing about this is that

  • you don’t pass through ALL events to ALL elements. Just the ones you want. (resolved @jvenema’s argument)
  • All events will work properly. (hover for example).

If you have any problems please let me know so I can elaborate.

Solution 6:

You can use an overlay with opacity set in order to the buttons/anchors in the back stay visible, but once you have that overlay over an element, you can’t click it.