Angular中设置想要达到元素hover效果的API_angular hover事件

背景： 最近项目中遇到需要设计导航栏的菜单，移动到某一导航标签时，需要显示一个隐藏的TAG。参考了一下淘宝导航栏的设计，发现他们也是使用水平方向的ul，在每个li里嵌入div来布局。

项目需求 是在移动到某个img时候，触发一个向下的子菜单区域，所以我的思路是：
将img和子菜单区域的div外层套一个container，对container进行hover操作。

方法： 在Angular4中就有了(mouseenter) 和 (mouseleave) 两个event去控制元素hover的事件。

`

html: 
                <div class="nav-menu-bd" (mouseenter)="changeAuth()" (mouseleave)="setDefaultAuth()">
                   <img class="options" src="assets/images/menus.png" style="height: 25px;" />
                   <div class="nav-menu-bd-wrap" *ngIf="isAdmin">
                     <a [routerLink]="[ '/admin/MachineConfiguration' ]">machine card</a>
                   </div> 
                </div>
       
1
2
3
4
5
6
7