代码之家  ›  专栏  ›  技术社区  ›  E.Meir

将项目悬停以显示其特定的div

  •  1
  • E.Meir  · 技术社区  · 6 年前

    *ngFor deals 数组

       <div class="card item" *ngFor="let deal of deals; let i = index">
          <div class="card-body item-body">...</div>
        </div>
    

    我想要达到的是当我在div上盘旋的时候 card 在html中,他对应的 card-body 使用jquery是一个相当简单的任务,但是我没有做到这一点,使用Angular。

    实现这一目标的方法是什么?

    1 回复  |  直到 6 年前
        1
  •  4
  •   Asanka    6 年前

    你可以试试这样的

      <div class="card item" *ngFor="let deal of deals; let i = index">
          <div  (mouseenter) ="onHover(i)"  (mouseleave) ="onHover(-1)>
           <div *ngIf = "i == hoverIndex" class="card-body item-body">...</div>
          </div >
        </div>
    

    在你的.ts文件中

    hoverIndex:number = -1;
    

    方法呢

    onHover(i:number){
     this.hoverIndex = i;
    }