如何在滑鼠懸停時根據組件欄位更改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>