从动态创建的 div 元素中选择一个 div - Angular

Question

我正在编写代码来使用*ngFor 指令动态创建div 元素，如下所示：

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

现在，当我将鼠标悬停在特定的 div 部分上时，只需要使用一些背景颜色突出显示该 div 部分。

如果我在div 标签上使用mouseenter 属性，它会选择所有div 元素，而不是选择我用鼠标悬停的确切元素。

 <div (mouseenter) ="hovered=true" 
       (mouseleave) ="hovered=false" 
       *ngFor = "let item of Items"  
       [style.background]="hovered? 'red' : none">
      <p>Item : {{item}} </p>
  </div>

那该怎么做呢？

Answer 1

我想知道您的*ngFor 本身是如何工作的，原因是您使用的是let item in Items 而不是let item of Items（它是of 不应该是in）

app.component.html

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

app.component.css

div:hover{
  background-color: yellow;
}

Working Stackblitz

编辑：

根据您编辑的问题，您将悬停分配给所有元素，而不是您需要使用您需要使用的索引将悬停分配给每个单独的元素，

<div (mouseenter)="hover=i" (mouseleave)="hover=-1" *ngFor = "let item of Items;let i = index"
       [style.background]="hover=== i ? 'red' : none">
  <p> Item: {{item}}  </p>
</div>

现在您可以在没有任何 css 的情况下实现结果，工作示例如下，

Edited Stackblitz

Answer 2

使用 CSS :hover 伪类

html

<div *ngFor="let item of items">
  <p class="hover-target">Item : {{item}} </p>
  <p>footer</p>
</div>

css

.hover-target:hover {
  background-color: red;
  /* whatever styles you want to apply */
}

注意 - 您的 *ngFor 语法错误。应该是*ngFor="let item of Items"

演示：https://stackblitz.com/edit/angular-kp4zfv