How to show another element with hover in Angular?

Issue

This is my demo.

When we hover #image-bg, I want #bg-box-hidden will be display: block.

But I'm losing my way to figure out how to solve the problem

<div class="grid pb1rem">
  <div *ngIf="avatar !== null" class="image-content">
    <img
      class="image-bg"
      [src]="avatar"
      (click)="selectImage.click()"
      hover-class="test"
      (mouseover)="onImgMouseover($event)"
      (mouseout)="onImgMouseout($event)"
    />
    <div #show class="bg-box-hidden" hover-class="show">
      <button class="btn only-icon">
        <i nz-icon nzType="delete" nzTheme="outline"></i>
      </button>
    </div>
  </div>
</div>

Solution

The main problem of your code are

1. Wrong event name.
2. The element doesn't rendered so you can't targeted the element.

Here is simple solution for you, It might be other way to implement as well.

Try this one, put on your .ts file of the component.

  onImgMouseover($event): void {
    const box = document.getElementsByClassName('bg-box-hidden')[0];
    box.style.display = 'block';
  }
  
  onImgMouseout($event): void {
    const box = document.getElementsByClassName('bg-box-hidden')[0];
    box.style.display = 'none';
  }

and need modify some on HTML something like

   <div
     class="grid pb1rem"
     (mouseenter)="onImgMouseover($event)"
     (mouseleave)="onImgMouseout($event)"
     >
     <div *ngIf="avatar === null" class="image_wrapper">
       <input
         type="file"
         accept=".png,.jpg"
         (change)="updateImage($event)"
         class="file-input"
         #selectImage
       />
     </div>
     <div *ngIf="avatar !== null" class="image-content">
       <img
         class="image-bg"
         [src]="avatar"
         (click)="selectImage.click()"
         hover-class="test"
       />
     </div>
     
     <div #show class="bg-box-hidden" hover-class="show">
       <button class="btn only-icon">
         <i nz-icon nzType="delete" nzTheme="outline"></i>
       </button>
       <div class="box-button-up">
         <input
           type="file"
           accept=".png,.jpg"
           (change)="updateImage($event)"
           class="file-input"
           #selectImage
         />
       </div>
     </div>
     </div>

Answered By - paranaaan