将鼠标悬停在内部元素上后，菜单的鼠标悬停事件触发

Question

我有一个菜单，显示只有当用户悬停在元素。只有当用户将鼠标悬停在菜单上时，这个菜单才会显示。如果用户鼠标离开菜单，它将隐藏。问题是菜单中有元素，当你将鼠标悬停在它们上面时，mouseout菜单事件会触发。

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

要使用延迟打开菜单，编写以下方法

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);
}

我想在悬停元素上打开菜单，只有当光标离开菜单时才关闭。将鼠标悬停在菜单元素

上时未关闭菜单

Answer 1

尝试mouseenter和mouseleave-这可能适合您的目的

在mdn

上有一个很好的例子说明了这两种方法(鼠标悬停vs鼠标进入)