时间戳

首页 > 解决方案 > Angular mouseover 和 mouseout 仅在列表中的一个上

angular - Angular mouseover 和 mouseout 仅在列表中的一个上

问题描述

 <div class="col-sm-2" style="margin-top: 15px;" *ngFor="let song of librarySongs">
            <div id="container" (mouseover)="options=true" (mouseout)="options=false">
                <img style="border-radius: 3px;" [src]="song.url" height="135px" width="135px">
                <div id="example" *ngIf="options">
                    <span style="float: left;color:#2cd4bb;font-size: 12px">ASSIGN</span>
                    <span style="float: right;color:#2cd4bb; font-size: 12px; ">DELETE</span> 
                </div>
            </div>
        </div>
    
    TS- 
     options: boolean;
    
      ngOnInit(): void {
          this.options = false;
        }

这是我的代码。鼠标悬停和鼠标悬停工作正常。唯一的问题是我有来自后端的歌曲列表，当我将鼠标悬停在其中任何一个上时，所有其他鼠标悬停也可见。我们如何将其更改为，当我将鼠标悬停在一个列表项上时，鼠标悬停应该是可见的，而不是所有的？

标签： angular

解决方案

您应该添加选项也不是全局的每个项目，并将选项参数添加到 librarySongs 数组的对象作为默认值false

 <div class="col-sm-2" style="margin-top: 15px;" *ngFor="let song of librarySongs">
            <div id="container" (mouseover)="song.options=true" (mouseout)="song.options=false">
                <img style="border-radius: 3px;" [src]="song.url" height="135px" width="135px">
                <div id="example" *ngIf="song.options">
                    <span style="float: left;color:#2cd4bb;font-size: 12px">ASSIGN</span>
                    <span style="float: right;color:#2cd4bb; font-size: 12px; ">DELETE</span> 
                </div>
            </div>
        </div>

推荐阅读