angular - 将鼠标悬停在图像上以在其旁边显示更大的图像。角 7

Question

嘿，我正在尝试创建一个与亚马逊组件相同的组件。当您在左侧有多个图像并将鼠标悬停在它们上以查看它们旁边的较大图像时。

我的方法是有一个 (mouseenter) 事件，它调用一个带有 $event 的函数。并且函数设置变量 {{image}}

所以我拥有的HTML是：

 <img width="100px;" id="div1" src="./assets/Capture.PNG" (mouseenter)="displayId($event)"/>
 <img width="100px;" id="div2" src="./assets/media.jpg" (mouseenter)="displayId($event)"/>

 <p>{{image}}</p>

和 .ts 是：

displayId(event: Event){
  this.image = event.target;
}

我知道有一种更好更简单的方法我只是 html 的新手，所以没有那么多知识。

当我尝试时，它给了我这个。[obectHTMLImageElement]

Answer 1

您可以使用mouseover而不是 mouseenter

 <img width="100px;" id="div1" src="./assets/Capture.PNG" (mouseover)="displayId($event)"/>

并在 TS

over(){
   this.image = event.target.source;
}