Popup overlaying polygon blocks mouseover event in Leaflet

example code: https://plnkr.co/edit/baMA0hrGq5XgG8Tb

I have a polygon that gets highlighted on mouseover. inside the polygon there is an icon and a popup bind to it. The problem is: when I hover over the popup, the polygon's mouseout is triggered, thus its not highlighted although the cursor is still inside the polygon, I don't want that to happen

What I tried:

1. using the popup offset method (documented here: https://leafletjs.com/reference.html#divoverlay) to control overlay behavior, without success.
2. using a specific css styling to the popup to prevent that (by changing the z-index), again without success (if I set visibility: hidden the popup will be hidden and it wont block the polygon mouseover event)
3. I don't prefer this solution but I thought to trigger the mouseover event (over the polygon) whenever there is mouseover event (over the popup)

Is there a way to achieve that without using a plugin?