Home Angular – Hovering div will display a container, but container disappears after trying to hover it

Questions

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

September 20, 2022

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()"
  class="prop-div"
>
  <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

>Solution :

You can easily make it with native HTML fix:

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