I'm currently working on implementing a hover effect on a div using an Angular ngClass directive. Within the template file, I have a div element with the class "list-item-container" that includes another div with the class "list-item." This "list-item" div is being iterated over using the *ngFor directive. Inside the "list-item" div, there are three child divs with the class "list-item-column," positioned horizontally like a table row with inline display. I've added mouseenter and mouseleave event listeners to the "list-item" div which trigger the hoverListItem() function in my .ts file. The hoverListItem() function toggles the value of the listItemHovered variable between true and false. Additionally, I'm using an ngClass directive on the "list-item" div to apply the 'list-item-highlight' CSS class based on the boolean value of listItemHovered, changing the background color accordingly.
The issue I'm encountering is that when hovering over a specific "list-item" div, all "list-item" divs are being affected rather than just the one I am interacting with. How can I resolve this problem?
.html file
<div class="list-item-container">
<ng-container *ngFor="let opportunity of dealService.opportunities">
<div [ngClass]="{'list-item-highlight': listItemHovered}" class="list-item" (mouseenter)="hoverListItem()"
(mouseleave)="hoverListItem()"
(click)="selectOpportunity(opportunity)">
<div
class="list-item-column">{{opportunity.account?.name === null ? "N/A" : opportunity.account.name}}</div>
<div class="list-item-column">{{opportunity.requirementTitle}}</div>
<div class="list-item-column">{{opportunity.salesValue | number: '1.0-2'}}</div>
</div>
</ng-container>
</div>
.css file
.list-item-container{
overflow: auto;
width: 100%;
max-height: 500px;
}
.list-item{
font-size: 15px;
border-radius: 10px ;
margin-top: 5px;
height: 50px;
background: lightgray;
color: black;
}
.list-item-highlight{
background: #7e00cc;
color: white;
}
.list-item-column{
height: inherit;
vertical-align: center;
display: inline-block;
width: 33.33%;
padding-left: 40px;
}
.ts file
hoverListItem() {
this.listItemHovered = !this.listItemHovered;
}