I implemented a simple navigation bar hover effect through instructions, and the effect is as follows:

you can see that the mouseLeave event is triggered when the pointer is on the dash line, asking how to stop it.

nav-hover.directive.ts :

@Directive({
  selector: "[appNavHover]"
})
export class NavHoverDirective {
  constructor(private el: ElementRef) { }

  @Input("appNavHover") index: number;

  @Input() active: HTMLElement;

  @HostListener("mouseenter", ["$event"]) onMouseEnter(e) {
    this.setActiveLine();
  }

  @HostListener("mouseleave", ["$event"]) onMouseLeave(e) {
    const index = this.getActived();

    this.setActiveLine(index);
  }

// 
private setActiveLine(index = this.index) {...}

// active
private getActived(): number {...}

}

app.component.html

...
<nav class="col-5 col-offset-1 header-item clearfix" -sharpnavWrap>
  <a class="block pull-left"
     *ngFor="let nav of navData; let i = index; let last = last;"
     [routerLink]="nav.link"
     routerLinkActive="active"
     [routerLinkActiveOptions]="{ exact: nav.link === "/" ? true : false }"
     [appNavHover]="i"
     [active]="activeLine">
    {{ nav.name }} {{ last ? forRendered(activeLine, navWrap) : "" }}
  </a>
  <i class="center-block active-line animated" -sharpactiveLine></i>
</nav>
...