Angular 2 mouseover events on div and childs

Question

I have a span child in a div.

In my div, I have a mouseover event, when I hover over 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 do I want to show my overlay when on a child, how do I achieve this?

Answer 1

mouseenter and mouseleave it is better to use this use case, because when a child mouseleave , mouseleave does not work, only when it exits the outer border of the actual element, it lights up.

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