如何在鼠标悬停时根据组件字段更改div背景

Question

我有一个div，当它被悬停时，背景颜色会改变，我还需要根据组件中的一个元素选择颜色。

<div *ngFor="let u of users;" 
  [style:hover.background-color] = "u.selected ? 'red' : 'blue' ">
</div>

Answer 1

从上面的评论链接中：

"实际上这不是一个Angular问题：伪元素不是DOM树的一部分，因此不会暴露任何可以用来与它们交互的DOM API。"

所以你可以使用CSS变量来代替：

样式文件：

.highlight:hover {
  background-color: var(--highlight-color);
}

模板：

<div class="highlight" *ngFor="let u of users;" 
         [ngStyle] = "{'--highlight-color': u.selected ? 'red' : 'blue'} ">
      {{ u.name }}
    </div>