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
CodePudding user response:
Try mouseenter
and mouseleave
- that might suit your purposes
There's a good example of the two approaches (mouseover vs mouseenter) on mdn