SGN SGN - 1 year ago 391
TypeScript Question

Angular 2 mouseover event on div and childs

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 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