只有第一个img标签从* ngFor li标签开始不断变化

Question

我试图在鼠标悬停时创建弹出说明

这是HTML代码

  <div class = "col-12 container" id = {{i}}>
    <ul class= "list-unstyled row">
      <li *ngFor = "let z of data(m[m.length-1]) | slice: 0 : 10; index as j" class = "list-item col-6">
        <img id = "champ" src = {{z[0]}}/>
        <div id = "spells">
          <img (mouseover)="pop(z[1].description, $event)" (mouseout) = "desc = out()" src = {{z[1].spellurl}}/>
          <img (mouseover)="pop(z[2].description, $event)" (mouseout) = "desc = out()" src = {{z[2].spellurl}}/>
        </div>
        <div id = "desc"></div>
      </li>
    </ul>

这些是鼠标悬停和鼠标悬停的功能

    pop(desc: string, event){
    let ds = document.getElementById("desc");
    let pos = event.target.getBoundingClientRect();
    let newpos = "translate(" + pos.right + "px, " + pos.bottom+ "px)";
    ds.style.display = "block";
    ds.innerHTML = desc;
    ds.style.transform = newpos;
}
    out(){
    let ds = document.getElementById("desc");
    ds.style.display = "none";
}

这是基本的用户界面，如这张图片

我要做的是，当鼠标悬停在这些小图像之一上时，获取它的位置并在图像右侧底部显示说明DIV。

一个问题是，即使我尝试将鼠标悬停在所有图像上，所有description div都显示在我绘制箭头的相同位置。因此，我从浏览器中进行了“检查元素”以检查HTML代码，但我发现只有首先 鼠标悬停时，第一个ngFor li标签的<div id = "desc">发生了变化。

我不知道为什么会这样，event.target.getBoundingClientRect（）应该可以为我提供一个元素的当前位置，但看起来好像不一样。

是否有解决此问题的建议？