Angular - Hovering div will display a container, but container disappears after trying to hover it-CodePudding

I have a container that is suppose to be displayed when I hover a text, but I also want the container to keep being displayed, in case the user wants to see something there (by hovering the container itself), but it disappears.

HTML:

<p (mouseenter)="displayPrope()" (mouseleave)="hidePrope()">show on hover</p>
<div
  *ngIf="displayProp"
  (mouseenter)="displayPrope()"
  (mouseleave)="hidePrope()"
  
>
  <span style="color: white">i am the container</span>
</div>

TS:

  displayProp: boolean = false;

  displayPrope() {
    this.displayProp = true;
  }

  hidePrope() {
    this.displayProp = false;
  }

Also, I created a live example in case anyone wants to see it better: https://stackblitz.com/edit/angular-ivy-pd987q

CodePudding user response：

You can easily make it with native HTML fix:

<div (mouseenter)="displayPrope()" (mouseleave)="hidePrope()">
  show on hover
  <div
    *ngIf="displayProp"
    
  >
    <span style="color: white">i am the container</span>
  </div>
</div>

CodePudding user response：

Assuming you want to hide the div again on mouseleave event on the trigget div

<div (mouseenter)="displayPrope()" (mouseleave)="hidePrope()">
  show on hover
  <div
    [hidden]="!displayProp"
    (mouseenter)="displayPrope()"
    (mouseleave)="hidePrope()"
    
  >
    <span style="color: white">i am the container</span>
  </div>
</div>

Note I have modified the *ngIf with hidden property.

mouseenter and mouseleave properties combined with ngIf does not work.