如何在 Angular 中显示悬停的另一个元素？

Question

这是我的demo。

当我们悬停 #image-bg 时，我希望 #bg-box-hidden 将是 display: block。

但是我不知道如何解决这个问题

<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>

Answer 1

你的代码的主要问题是

错误的事件名称。
该元素未呈现，因此您无法定位该元素。

这是适合您的简单解决方案，也可能是其他实现方式。

试试这个，把你的 .ts 组件文件。

  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';
  }

并且需要在 HTML 上修改一些内容，例如

   <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>

如何在 Angular 中显示悬停的另一个元素？

How to show another element with hover in Angular?

css

angular