Angular：如何为动态生成的div实现单个鼠标悬停高亮

嘿，我太懂你遇到的这个坑了！你现在用一个全局的hovered变量控制所有循环出来的div，结果只要有一个div触发鼠标事件，所有div都跟着变色——这显然不是你想要的单个元素高亮效果对吧？

最简单的解决方案：用CSS伪类（强烈推荐） #

如果只是单纯的悬停改背景色，完全不需要写TS逻辑，直接用CSS的:hover伪类就搞定，既简洁又高效：

先在组件样式文件里加这段代码：

.item-card:hover {
  background-color: red;
}

然后修改模板，给循环的div加上这个类：

<div *ngFor="let item of Items" class="item-card">
  <p>Item : {{item}} </p>
</div>

这样每个div只会在自己被鼠标悬停时触发背景色变化，全程不用碰组件里的变量，超省心～

需要TS逻辑时的解决方案（比如悬停还要做额外操作） #

如果除了改背景色，你还需要在悬停时执行其他TS代码，那就要给每个item单独维护悬停状态了：

1. 在组件TS文件里定义一个对象，用来记录每个item的悬停状态：

// 如果你的Items是字符串/数字类型，直接用item当key；如果是对象，建议用id这类唯一标识
hoveredStates: {[key: string]: boolean} = {};

// 鼠标进入时标记当前item的悬停状态
onHoverEnter(item: any) {
  this.hoveredStates[item] = true;
}

// 鼠标离开时取消标记
onHoverLeave(item: any) {
  this.hoveredStates[item] = false;
}

2. 接着修改模板，给每个div绑定对应的事件和样式：

<div 
  *ngFor="let item of Items"
  (mouseenter)="onHoverEnter(item)"
  (mouseleave)="onHoverLeave(item)"
  [style.background]="hoveredStates[item] ? 'red' : 'transparent'"
>
  <p>Item : {{item}} </p>
</div>

要是你的Items里是带唯一标识的对象（比如每个item有id属性），记得用id当key避免引用问题：

<div 
  *ngFor="let item of Items"
  (mouseenter)="onHoverEnter(item.id)"
  (mouseleave)="onHoverLeave(item.id)"
  [style.background]="hoveredStates[item.id] ? 'red' : 'transparent'"
>
  <p>Item : {{item.name}} </p>
</div>

为什么原来的代码不行？ #

你之前用的是一个全局的hovered变量，所有循环生成的div都绑定了同一个变量。只要任何一个div触发mouseenter把hovered设为true，所有div的背景色都会跟着变——因为它们共享同一个状态变量，没有区分单个元素的独立状态。

内容的提问来源于stack exchange，提问作者SaravananKS