将鼠标悬停在图片上可以在旁边显示更大的图片。角度7

Question

嘿，我正在尝试创建一个行为与亚马逊组件相同的组件。如果左侧有多个图像，则将鼠标悬停在它们上方可以看到旁边更大的图像。

我的方法是要有一个（鼠标事件）事件，该事件将调用带有$ 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 代替鼠标输入

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

和TS

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