Angular 2 mouseover event on div and childs

Question

I have a span child in a div.

On my div I have a mouseover event, when I hover on the span, my event triggers.

Simple code:

<div (mouseover)="showOverlay($event, FooBar)" (mouseleave)="showOverlay($event, FooBar)">
    <span>{{ someDataHere }}</span>
</div>


 public showOverlay($event, op, element): void {
    op.toggle($event, element);
    $event.preventDefault();
}

What I want is to keep showing my overlay when on child, how do I achieve this?

Answer 1

mouseenter and mouseleave cover this use case better because entering a child doesn't mouseleave to fire, only leaving the outside border of the actual element makes it to fire.

See also What is the difference between the mouseover and mouseenter events?