Menu's mouseover event triggers after hovering over inner element's

Question

I have a menu that show's only when user hover's on element. And that menu stay's visible only when user hover's on menu. if user mouseout of menu it will hide. The problem is that there are elements in the menu and when you hover over them, the mouseout menu event fires.

<a (mouseover)="showMenu()" (mouseout)="hideMenu()"</a>

<menu *ngIf="isHoverable" (mouseover)="show(true)" (mouseout)="show(false)"></menu>

To open menu with a delay, the following methods were written

isHoverable: boolean = false;
timer: any;

show(show: boolean): void {
    clearTimeout(this.timer);
    this.isHoverable = show;
}

showMenu(): void {
    this.timer = setTimeout(() => {this.show(true)}, 500);
}

hideMenu(): void {
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {this.show(false)}, 500);
}

I want to open menu on hovering element and close only when the cursor leaves the menu. Not closing the menu when hovering over it elements

Answer 1

Try mouseenter and mouseleave - that might suit your purposes

There's a good example of the two approaches (mouseover vs mouseenter) on mdn