如何将鼠标悬停在图片上并在angular中显示信息框？

<div *ngFor="let image of images">
  <img src="{{ image.url }}" (mouseover)="showInfoBox(image)">
</div>

import { Component } from '@angular/core';
import { InfoBoxComponent } from './info-box.component';

@Component({
  selector: 'app-image-gallery',
  template: `
    <div *ngFor="let image of images">
      <img src="{{ image.url }}" (mouseover)="showInfoBox(image)">
    </div>
    <app-info-box *ngIf="showBox" [image]="selectedImage"></app-info-box>
  `,
})
export class ImageGalleryComponent {
  images: any[] = [
    { url: 'image1.jpg', title: 'Image 1' },
    { url: 'image2.jpg', title: 'Image 2' },
    { url: 'image3.jpg', title: 'Image 3' },
  ];
  showBox: boolean = false;
  selectedImage: any;

  showInfoBox(image: any) {
    this.selectedImage = image;
    this.showBox = true;
  }
}

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-info-box',
  template: `
    <div class="info-box">
      <h3>{{ image.title }}</h3>
      <p>{{ image.description }}</p>
    </div>
  `,
  styles: [
    `
    .info-box {
      position: absolute;
      top: 0;
      left: 0;
      background-color: #fff;
      padding: 10px;
      border: 1px solid #ccc;
    }
    `,
  ],
})
export class InfoBoxComponent {
  @Input() image: any;
}