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

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

上有两种方法（鼠标悬停与鼠标输入）的一个很好的例子

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

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

mouseover

mouseout

angular