CODEWITHSUNDEEP
angular
manu mehra
manu mehra

Reputation: 85

Angular mouseover and mouseout only on one among list

 <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;
        }

This is my code. Mouseover and mouseout is working fine. Only issue is i have list of songs coming from backend and when I hover on any one of them all the other mouseover are also visible. How can we change it to such that when I hover on only one list item than that mouseover should be visible and not all of them?

Upvotes: 0

Views: 71

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17590

You should add options too each item not global and add options parameter to librarySongs array's object as default 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>

Upvotes: 1

Related Questions