SGN SGN - 3 months ago 70
TypeScript Question

Angular 2 mouseover event on div and childs

I have a span child in a div.

On my div I have a

event, when I hover on the
, my event triggers.

Simple code:

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

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

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


mouseenter and mouseleave cover this usecase better because entering a child doesn't mauseleave to fire, only leaving the outside boarder of the actual element does.

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