How can I make an unclickable HTML "Ghost" Div?

Question

Id like to make a Toast like div in HTML, that appears for a few seconds and eases out again, using css ease out. The Problem is now, that it blocks clicking on stuff behind it while it is active and while it is invisible. So is there a way to et the user click on stuff behind it? I could just destroy it everytime it disapears, but then the ease effect is lost and the user still cant click on buttons while it is active. So how do I make it more Google Toast like?

Answer 1

You can use pointer-events: none:

<div style="pointer-events: none">hi</div>

Fiddle: Fiddle Using Button