首页  >  问答  >  正文

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

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

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

P粉968008175P粉968008175425 天前550

全部回复(1)我来回复

  • P粉520545753

    P粉5205457532023-09-13 00:19:30

    从上面的评论链接中:

    "实际上这不是一个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>

    回复
    0
  • 取消回复