Make toast allow to click the elements behind on hover like skype notification

Question

I have created toast using ngx-toastr in angular base UI. I want something like skype notification when user hovers on toast it should allow clicking on elements behind it which are hidden under it.

When toast comes in the top right at that position I have a button to do something, a toast appears exact over it and makes button not accessible for user until it disappears Is there some feature that when user hover over toast it becomes less opaque and should allow user to click button through it

Answer 1

Just to make sure i got the question right, you want to be able to see through the ngx toast and click on the underlying elements, right?

You can add this to the CSS file ( either globally or component level css ) of your app

::ng-deep #toast-container > div {
    opacity: 0.8 !important;
    pointer-events: none !important;
}