Making HTML Underlying Elements Clickable Using pointer-events CSS Property

When we place a HTML element above an another element then the underlying element becomes unclickable.

We can make the make the top element to bypass the mouse evenets(click, hover etc) to the underlying element using the pointer-events CSS property.

By default the value of pointer-events is auto for all elements therefore top element block mouse events for underlying elements. By making the pointer-events to “none” we can make the top elements pass the mouse events to the underlying elements.

Let’s see a demo:

Some old browsers don’t support pointer-events CSS property. In that case use the pointer-events Polyfill