SGN SGN - 1 year ago 346
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?

Answer Source

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?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download