时间戳

首页 > 解决方案 > 只有第一个 img 标签从 *ngFor li 标签不断变化

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

问题描述

我正在尝试在鼠标悬停时创建弹出描述

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

这些是 mouseover 和 mouseout 的函数

    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。

一个问题是，即使我试图将鼠标悬停在所有图像上，所有描述 div 都显示在我绘制箭头的相同位置。所以我从浏览器中“检查元素”来检查 HTML 代码，我发现只有第 <div id = "desc">一个 ngFor li 标记在鼠标悬停时才会发生变化。

我不知道它为什么会发生，并且 event.target.getBoundingClientRect() 应该为我提供一个元素的当前位置，但它看起来不像。

有什么建议可以解决这个问题吗？

标签： javascriptangular

解决方案

推荐阅读