mouseenter/mouseleave ignoring covering element

Question

It seems that the mouseenter/ mouseleave method is trigger not only when the mouse's coordinate enters the target's client rectangles, but also when another element uncover or cover the target. This is a problem because in my mouseenter callback, I want to display another element E on top of the target. I also want E to disappear upon mouseleave. You can think of this as a overlapping tooltip.

However, when I move my mouse onto the target, mouseenter is fired and element E will cover it. This coverage futher triggers a mouseleave event, so E will disappear. This further triggers a mouseenter event so E will appear again..... Which is quite a headache.

So basically, I am wondering whether there is a version of mouseenter/ mouseleave that only care about whether the mouse enters or leaves the client rectangles of the target, regardless whether the target is covered or not.

update: @arunopjohny created a JS fiddle to illustrate this problem. See comments

Answer 1

Found perfect solution in a relevant question: Ignore mouse interaction on overlay image

The "pointer-events: none;" property will disable any mouse event of the element. More importantly, the event will instead "go through" to the element beneath it. Using this on the overlay element E in my question solves the problem.