角度鼠标悬停并离开不工作 MAT-MENU答案

【问题标题】：Angular mouseover and leave not working MAT-MENU角度鼠标悬停并离开不工作 MAT-MENU
【发布时间】：2018-09-25 21:30:17
【问题描述】：

我有一个 mat-sidenav 和一个 mat-item 和 mat-menu 列表。然后，当我将鼠标悬停在我希望菜单显示的项目之一上时。这部分正在工作。但是，当我离开那个菜单或项目并移到一个新项目上时，我希望它的菜单显示出来。

https://stackblitz.com/edit/angular-xsscrm

我已经包含了一个带有行为演示的 stackblitz。

这里出了什么问题，我在进入和退出时都有，但是当我将菜单留在新菜单上时，除非我点击它，否则它不会打开。

感谢您的帮助

【问题讨论】：

包含的 stackblitz 似乎不包含您提到的任何悬停行为。
@p4r1 是正确的，当你从一个项目移动到另一个项目时，它的菜单没有显示，你必须点击它才能看到菜单，即使我已经实现了 mouseenter 和 @987654323 @
我之前评论的意思是，你的问题中的 stackblitz 没有 mouseenter 或 mouseleave 逻辑。它看起来像是从材料模板中提取的未经修改的样本，没有任何额外的代码。
@p4r1 发错网址，请重新检查
@SpencerFontein 将鼠标离开事件移动到与鼠标进入相同的级别，它将起作用。但是，有一个有趣的动画可以让您生成的菜单项在安顿下来之前“滑动”。不知道那是什么

标签： html angular angular-material

【解决方案1】：

这里的问题是，当一个菜单打开时，它会创建一个覆盖所有元素的背景。此背景导致监听元素“看到”鼠标事件，直到通过鼠标单击关闭覆盖。幸运的是，菜单控件有一个用于移除背景的标志。将此设置为 false 可以解决您看到的问题。

旁注：您在<mat-list> 元素上有一个*ngFor，但我认为您想将其移至<mat-list-item> 元素，因为您需要很多列表项，而不是很多列表。由于您在<mat-list-item> 之外使用*ngFor 的局部变量，因此您可以创建一个<ng-container> 元素来容纳您的*ngFor。请参阅下面的堆栈闪电战：

https://stackblitz.com/edit/angular-xsscrm-kx6jyd

另一个注意事项：此行为类似于工具提示。也许这对您的用例会是一个更好的控制？ https://material.angular.io/components/tooltip/overview

【讨论】：